简单竖向Tab选项卡

时间：2023-03-10 01:55:14
简单竖向Tab选项卡 
<!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>

相关文章