jquery 简单实现tab切换

最新推荐文章于 2024-08-25 09:57:22 发布

dingbu6511

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量98

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Agrass/p/6595873.html

版权

html 代码和 jquery 代码。

<html>
<head>
    <title>tab</title>
</head>
<body>
    <div class="header">
        <ul class="tab">
            <li>主题</li>
            <li>文字</li>
            <li>音乐</li>
            <li>书籍</li>
        </ul>
    </div>
    <div class="container">
        <div class="tab1">11111111111111</div>
        <div class="tab2">22222222222222</div>
        <div class="tab3">33333333333333</div>
        <div class="tab4">44444444444444</div>
    </div>
</body>
<script src="style/jquery2.1.min.js"></script>
<script type="text/javascript">

$(function(){
    var  tab_li=$(".tab li");
    tab_li.click(function(){
        var li_index=tab_li.index(this);
        //alert(li_index); 
        $('div.container>div').eq(li_index).show()
                              .siblings().hide();
    })

})

    1.获取标题
    2.点击标题触发函数
    3.获取当前点击的标题的索引值
    4.检测是否获得成功 
    5.获取所有要切换的tab页面
      根据索引值eq（）使对应的tab页面显示
      其他所有兄弟元素隐藏

</script>
</html>

css代码根据自己所需而改变。

<style type="text/css">
    *{margin: 0;padding: 0;}
    ul li{list-style: none;}
    .header{width: 100%;height: 80px;background-color: black;}
    .tab{margin-left:40%;}
    .tab li{width:40px;height:50px;float: left;background: #fff;margin:10px;margin-left: 10px;text-align: center;line-height: 50px;}
    .container{width: 100%;}
    .tab1,.tab2,.tab3,.tab4{height: 500px;background: #ada;}
    .tab2,.tab3,.tab4{display: none;}
    </style>

具体就这样，有点丑。
这里写图片描述

转载于:https://www.cnblogs.com/Agrass/p/6595873.html

dingbu6511

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 简单实现tab切换

html 代码和 jquery 代码。<html><head> <title>tab</title></head><body> <div class="header"> <ul class="tab"> &...
复制链接

扫一扫