?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" οnmοusemοve="ntabs(this,0);">醫(yī)院動態(tài)</li>
<li class="normal" οnmοusemοve="ntabs(this,1);">媒體報道</li>
<li class="normal" οnmοusemοve="ntabs(this,2);">權(quán)威技術(shù)</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>新的一年即將到來，在這個冬天里，你卻惶恐不安，只因為白斑的困擾。白癜風(fēng)對患者的學(xué)習(xí)工作、社...[<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

?

轉(zhuǎn)載于:https://www.cnblogs.com/linyusong/p/5516690.html

總結(jié)

以上是生活随笔為你收集整理的js切换换class的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。