<web开发>选项卡切换功能

效果:鼠标移动到某个选项卡就显示哪个  




原理:下面是5个对应的div,上面的选项卡鼠标移动到哪个就让对应的div显示其他的隐藏。

代码:

<!--下部   菜单切换-->
<div>
    <div id="detail_title">
        <div onmouseover="showdiv(1)"><a href="">商品详情</a></div>
        <div onmouseover="showdiv(2)"><a href="">用户评论</a></div>
        <div onmouseover="showdiv(3)"><a href="">付款方式</a></div>
        <div onmouseover="showdiv(4)"><a href="">送货方式</a></div>
        <div onmouseover="showdiv(5)"><a href="">相关商品</a></div>
    </div>
   <div id="detail_info">
       <div id="info1" class="detail_info_same"  style="display: block" >
           商品详情   今天是个好日子啊啊肌肤和收费几点睡觉说的就是姐姐姐姐是我我我
           打卡的技能放你们是谁水水水水是快乐啦啦啦啦啦啦啦啦了
       </div>
       <div id="info2" class="detail_info_same" style="display: none" >
           用户评论   好评好评真的好评!
       </div>
       <div id="info3" class="detail_info_same" style="display: none" >
           付款方式   您说呢  是支付宝还是微信呢?
       </div>
       <div  id="info4" class="detail_info_same" style="display: none" >
           送货方式   一般采用快递   需要顺丰请提前说明
       </div>
       <div  id="info5" class="detail_info_same" style="display: none" >
           相关商品   还有很多商品您自己选择哈
       </div>
   </div>

css:

#detail_title{clear: both;}
#detail_title div{
    float:left;
    margin-top: 30px;
    padding: 10px;
    border: solid 1px grey;border-bottom: none;
}
#detail_title div a{text-decoration: none;}
#detail_title div a:hover{ color:red;}
#detail_info {clear: both;
    width: 750px;}

js:

//切换选项卡功能
function showdiv(number){
    for(var i=1;i<=5;i++){
        if(i==number){
            var obj=document.getElementById("info"+number);
            obj.style.display="";
        }else{
            var obj=document.getElementById("info"+i);
            obj.style.display="none";
        }
    }
}

阅读更多
上一篇<web前端>web开发实现详情页面放大镜功效
下一篇安卓studio连接不上天天模拟器的解决方法
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭