js切换换class
1,
js代码
function ntabs(thisObj,Num)
{if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{if (i == Num)
{thisObj.className = "active";
document.getElementById(tabObj+"_cont"+i).style.display = "block";
}
else{
tabList[i].className = "normal";
document.getElementById(tabObj+"_cont"+i).style.display = "none";
}
}
}
html:
<div class="hot_news">
<div class="title">
<ul id="mytab1">
<li class="active" onmousemove="ntabs(this,0);">医院动态</li>
<li class="normal" onmousemove="ntabs(this,1);">媒体报道</li>
<li class="normal" onmousemove="ntabs(this,2);">权威技术</li>
</ul>
</div>
<div class="content">
<div class="cont_01" id="mytab1_cont0">
<div><img src="/static/images/2z_04.jpg" width="130px;" height="125px;" />
<h3>新年3重礼,蜕变迎新春</h3>
<p>新的一年即将到来,在这个冬天里,你却惶恐不安,只因为白斑的困扰。白癜风对患者的学习工作、社...[<a style="color:#c13145; " href="#">详情</a>]</p></div>
<div>
<ul>
<li><img src="/static/images/2z_06.jpg" /><a href="#">新年3重礼,蜕变迎新春</a></li>
<li><img src="/static/images/2z_06.jpg" /><a href="#">新年3重礼,蜕变迎新春</a></li>
<li><img src="/static/images/2z_06.jpg" /><a href="#">新年3重礼,蜕变迎新春</a></li>
<li><img src="/static/images/2z_06.jpg" /><a href="#">新年3重礼,蜕变迎新春</a></li>
<li><img src="/static/images/2z_06.jpg" /><a href="#">新年3重礼,蜕变迎新春</a></li>
</ul>
</div>
</div>
<div class="cont_02 none" id="mytab1_cont1"></div>
<div class="cont_03 none" id="mytab1_cont2"></div>
</div>
</div>
css:
*{ margin: 0 auto; text-align: center; list-style: none; font-family: 微软雅黑; padding: 0; }
ul li{list-style:none;}
.hot_news{ float:left; width:360px; margin-right:15px; height:345px;}
.hot_news .title{ height:45px; widows:360px; margin-bottom:10px;}
.hot_news .title ul li{ float:left; width:120px; height:45px; line-height:45px; background:#eee;}
.hot_news .title .active{ background:#c13145; color:#fff; cursor:pointer;}
.hot_news .content img{ float:left; margin-right:10px;}
.hot_news .content h3{ font-weight:normal; height:35px; line-height:35px; display:block;}
.hot_news .content p{ line-height:24px; font-size:14px; text-indent:2em; text-align:left;}
.hot_news .content ul{ margin-top:5px;}
.hot_news .content ul li{ height:30px; line-height:30px; width:340px; overflow:hidden; text-align:left;}
.hot_news .content ul li img{ display:block; padding-top:11px;}
.hot_news .content ul li a{ color:#888;}
.hot_news .content ul li a:hover{ color:#c13145;}
2,
$(document).ready(function(){
var $tab_li = $('.tab ul li');
$tab_li.hover(function(){
$(this).addClass('selected').siblings().removeClass('selected');
var index = $tab_li.index(this);
$('div.tab_box > div').eq(index).show().siblings().hide();
});
});
tab切换的两段js
js切换换class的更多相关文章
- php网页切图/js切图
PhantomJS抓取网站页面信息以及网站截图 http://phantomjs.org/download.html PHP imagegrabscreen和imagegrabwindow(截取网站缩 ...
- 独辟蹊径:逆推Krpano切图算法,实现在浏览器切多层级瓦片图
前言 此文我首发于CSDN(所以里面的图片有它的水印) 趁着隔离梳理一下之前做的一个有用的功能:在浏览器中去切割多分辨率瓦片图 这是一个有趣的过程,跟我一起探索吧 阅读本文需具备前置知识:对krpan ...
- jsp+springmvc实现文件上传、图片上传和及时预览图片
1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...
- rc.sysinit 解析
$# :它可抓出 positional parameter 的數量,即脚本后面的参数有几个 $@和$*表示全部参数,但不包含脚本名,即$0,如果在command line上跑 my.sh p1 “p2 ...
- linux系统配置之开机启动过程(centos)
1.开机流程如下: 2.BIOS BIOS是英文"Basic Input Output System"的缩略词,直译过来后中文名称就是"基本输入输出系统".其实 ...
- 基于HTML5和JS实现的切水果游戏
切水果游戏曾经是一款风靡手机的休闲游戏,今天要介绍的就是一款网页版的切水果游戏, 由JavaSript和HTML5实现,虽然功能和原版的相差太大,但是基本的功能还是具备了,还是模仿的挺逼真,有一定的J ...
- vue基于video.js实现视频播放暂停---切图网
切图网是最早致力于PSD2HTML切图等web前端外包服务的,随着前端技术的更新迭代,现在也已经全面投入了vue的浪潮了,下面是vue中实现视频播放的方法. vue.js中引入video视频播放器 m ...
- 在vue中继续使用layer.js来做弹出层---切图网
layer.js是一个方便的弹出层插件,切图网专注于PSD2HTML等前端切图多年,后转向Vue开发.在vue开发过程中引入layer.js的时候遇到了麻烦.原因是layer.js不支持import导 ...
- [开发笔记]-页面切图、CSS前端设计、JS
这两天在学习页面的切图,样式设计,把学习过程中注意的地方记录下来. 一. input输入框点击时去掉外边框 一般在IE,firefox下,设置 border:0 none; 即可.但在chrome下, ...
随机推荐
- 《A First Course in Probability》-chaper8-极限定理-弱大数定理
基于之前强大数定理的得证,这里我们再结合切比雪夫不等式,能够得到弱大数定理. 弱大数定理: 表面上,强大数定理和弱大数定理好像是质同的,但是他们之间真正的区别到底是什么呢?
- VM虚拟机下在LINUX上安装ORACLE 11G单实例数据库
1.环境及安装前规划:虚拟机及OS如下 环境:VMware Wordstation ACE版 6.0.2 操作系统:OracleLinux-R5-U8-Server-i386-dvd 3.2G ...
- MenuDrawer的使用
---恢复内容开始--- MenuDrawer框架是一个可以实现上下左右滑动的框架,在使用中可以在xml文件中配置也可以在java代码中实现效果的配置 可以以jar的形式或依赖的形式存在 用 ...
- orace owi介绍
第1章 OWI介绍记录和观察进程所经历的等待现象的功能和界面以及方法论,统称为OWI,也就是Oracle Wait Interface.等待事件的P1.P2.P3值可以通过v$session_wait ...
- java_method_readFile读取文件文本txt
/** * @Title: TxtAndCsvUtils.java * @Package cn.com.qmhd.tools * @Description: TODO(读取txt和CSV文档) * @ ...
- 找出Active Directory架构操作主机方法!
- Cadence 信号完整性(一)-- 仿真步骤3
(2)单击“Identify DC Nets”,弹出“Identify DC Nets”窗口,如图2-6 所示: 图 2-6 Identify DC Nets 窗口 (3)在“Net”列表中选择网络如 ...
- 【设计模式 - 12】之代理模式(Proxy)
1 模式简介 1.1 定义 为其他对象提供一种代理以控制对这个对象的访问.代理对象起到中介作用,可以去掉功能服务或增加额外服务. 1.2 常见的代理模式 1) 远程 ...
- 20169210《Linux内核原理与分析》第一周作业
第一次接触Linux,还是有点不适应的,与Windows区别还是比较大的.在免费与收费.软件与支持.安全性.使用习惯.可定制性和应用范畴等方面都有区别. 通过实验楼的<Linux基础入门(新版) ...
- 手机安全卫士开发系列(2)——splash界面
一.Android中的MVC (1)activity主要用来页面的展示 (2)engine包:获取数据和展示数据(包含数据适配器) (3)domain包:存放数据实体 第一种包结构组织关系: 第二种包 ...