简单竖向Tab选项卡

最新推荐文章于 2024-07-26 11:41:15 发布

weixin_33725126

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量1.7k

点赞数

文章标签： javascript java ViewUI

原文链接：http://www.cnblogs.com/dongshuangjie/p/4485251.html

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{ padding:0;margin: 0;}
        .example{ width: 500px;height: 400px; margin: 50px auto 0 auto; }
        #mytab{ width: 100px; float: left; border-left: 1px solid lightgray; border-bottom:1px solid lightgray;}
        #mytab li{ list-style-type: none;  border-top: 1px solid lightgray; border-right:1px solid lightgray;height: 30px;line-height: 30px;text-align: center;}
        #mytab li.active{ border-right:1px solid #ffffff;}
        #mytabContent{float: left;}
        #mytabContent div{ display: none;}
        #mytabContent div.active{display: block;}
        #mytabContent div p{padding: 10px;}
    </style>
</head>
<body>
<div class="example">
    <ul id="mytab" class="nav">
        <li class="active"><a>First</a></li>
        <li><a>Second</a></li>
        <li><a>Third</a></li>
        <li><a>Fourth</a></li>
    </ul>
    <div id="mytabContent">
        <div class="tab-pane active">
            <p>This is First</p>
        </div>
        <div class="tab-pane">
            <p>This is Second</p>
        </div>
        <div class="tab-pane">
            <p>This is Third</p>
        </div>
        <div class="tab-pane">
            <p>This is Fourth</p>
        </div>
    </div>
</div>
<script src="js/jquery-1.11.0.min.js"></script>
<script>
    $(function(){
        $("#mytab").find("li").click(function(){
            $(this)
                    .siblings("li")
                    .removeClass("active")
                    .end()
                    .addClass("active");

            var index=  $("#mytab").find("li").index($(this));
            if(index>=0){
                var targetContent=$("#mytabContent").find("div").eq(index);
                targetContent
                        .siblings("div")
                        .removeClass("active")
                        .end()
                        .addClass("active");
            }else
            {
                alert("nima");
            }

        });
    });
</script>
</body>
</html>

View Code

转载于:https://www.cnblogs.com/dongshuangjie/p/4485251.html

weixin_33725126

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
简单竖向Tab选项卡

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ padding:0;margin: 0;} .exampl...
复制链接

扫一扫