jQuery实现简单的tab选项卡（适合新手）

最新推荐文章于 2024-10-10 10:50:43 发布

baimao6536

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量83

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/anjx/p/6072732.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="jquery-1.8.3.min.js"></script>
    <style>
        *{margin:0; padding:0;}
        li{list-style:none; float: left; width:100px; height:50px; background:#fff700; text-align: center; line-height: 50px; border-right:1px solid;}
        #box{width:403px; height:400px; border:1px solid darkred; text-align: center; line-height:300px; }
        .start{background: red;}
    </style>
</head>
<body>
    <ul>
        <li class="start">菜单一</li>
        <li>菜单二</li>
        <li>菜单三</li>
        <li>菜单四</li>
    </ul>
    <div id="box">菜单一的内容</div>
<script>
    var arr=["菜单一的内容","菜单二的内容","菜单三的内容","菜单四的内容"];
    $(function () {
        for(var i=0;i<arr.length;i++){
            $("li:eq("+i+")").click(function () {
                $("li").removeClass("start");
                $(this).addClass("start");
                $("div").html(arr[$(this).index()]);
            });
        }
    });
</script>
</body>
</html>