码迷,mamicode.com
首页 > Web开发 > 详细

JS滑动门

时间:2015-11-24 00:59:05      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:

   <a href="#" id="one1" onmouseover="setTab(‘one‘,1,2)" class="hover">专家汇聚</a>
   <a href="#"  id="one2" onmouseover="setTab(‘one‘,2,2)" >主治医师</a>

 <div id="con_one_1" >
 <a href="#"  target="_blank" class="sub2_more">更多</a>
<div class="sub2_con1">
                    
     00
 
</div>
</div>
 <div id="con_one_2"   style="display:none">
 <a href="#"  target="_blank" class="sub2_more">更多</a>
<div class="sub2_con1">
     555
 
</div>

 </div>
//tab切换
function setTab(name, cursel, n) {
    for (i = 1; i <= n; i++) {
        var menu = document.getElementById(name + i);
        var con = document.getElementById("con_" + name + "_" + i);
        menu.className = i == cursel ? "hover" : "";
        con.style.display = i == cursel ? "block" : "none";

    }
}
.sub2_more
{
    display:block; 
    float:right;    
    text-align:center; 
    position:relative;
    color:#00968b;
    margin-top:-48px;
    text-decoration:none;
    font-size:12px;
    margin-right:20px;
 } 

.sub2_more:hover{color:#00c1b3}

 

解释:setTab(‘one‘,1,2) 与IDcon_one_2相关联,参数中的2表示总的滑动门总数

JS滑动门

标签:

原文地址:http://www.cnblogs.com/qigege/p/4990107.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!