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" οnmοusemοve="ntabs(this,0);">医院动态</li>
<li class="normal" οnmοusemοve="ntabs(this,1);">媒体报道</li>
<li class="normal" οnmοusemοve="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

 

转载于:https://www.cnblogs.com/linyusong/p/5516690.html