Question

点击时应该切换面板。前两个面板工作正常，但其他两个不工作，他们只是隐藏活动标签，并且在单击面板3和4后点击它们时也没有激活，前两个面板也不起作用。

<head>
    <title>Tab Panel Widget</title>

    <script src = "jquery-3.0.0.js"></script>

    <style>

        .tab-panels ul {
            margin: 0;
            padding: 0;
        }

        .tab-panels ul li.active {
            background: #666;
        }

        .tab-panels ul li {
            list-style-type: none;
            display: inline-block;
            background: #999;
            padding: 3px 10px;
            border-radius: 10px 10px 0 0;
            color: #fff;
            font-weight: 200;
            cursor: pointer;
        }

        .tab-panels ul li:hover {
            color: #fff;
            background: #666;
        }

        .tab-panels .panel {
            display: none;
            background: #c9c9c9;
            padding: 30px;
            border-radius: 0 0 10px 10px;
        }

        .tab-panels .panel.active {
            display: block;
        }

    </style>
</head>

<body>

    <div class = "tab-panels">

        <ul class = "tabs">
            <li rel = "panel1" class = "active">panel1</li>
            <li rel = "panel2">panel2</li>
            <li rel = "panel3">panel3</li>
            <li rel = "panel4">panel4</li>
        </ul>

        <div id = "panel1" class = "panel active"">
        content1<br>
        content1<br>
        content1<br>
        content1<br>
        content1<br>
        </div>

        <div id = "panel2" class = "panel">
        content2<br>
        content2<br>
        content2<br>
        content2<br>
        content2<br>
        </div>

        <div id = "panel1" class = "panel">
        content3<br>
        content3<br>
        content3<br>
        content3<br>
        content3<br>
        </div>

        <div id = "panel1" class = "panel">
        content4<br>
        content4<br>
        content4<br>
        content4<br>
        content4<br>
        </div>

    </div>

    <script>
        $(function(){
            $(".tab-panels .tabs li").on("click", function(){
                $(".tab-panels .tabs li.active").removeClass("active");
                $(this).addClass("active");
                var panelToShow = $(this).attr("rel");
                $(".tab-panels .panel.active").slideUp(300, function(){
                    $(this).removeClass("active");
                    $("#"+panelToShow).slideDown(300, function(){
                        $(this).addClass("active");
                    });
                });
            });
        });
    </script>

</body>

Answer 1

更改面板3和面板4

将面板-1更改为面板3以进行第三个div部门，将面板1更改为面板4进行第四个div部分

<!doctype html> 
<html>
    <head>
        <title>Hello, World!</title>
        <!--references-->
        <link rel="stylesheet" type="text/css" href="styles/index.css" />
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
    </head>
        <body>
            <div id="wrapper">
                <div id = "box">
                    <h1 id="head">Hello, World</h1>
                    <div id = "btn-panel">
                        <button class="btn" id="btn1">panel1</button>
                        <button class="btn" id="btn2">panel2</button>
                        <button class="btn" id="btn3">panel3</button>
                        <button class="btn" id="btn4">panel4</button>
                    </div><!--button-panel-->
                </div> <!--Box-->
                        <div id = "panel-row">
                            <div class="panel" id="p1"><p class="phead">Panel#1</p><hr></div>
                            <div class="panel" id="p2"><p class="phead">Panel#2</p><hr></div>
                            <div class="panel" id="p3"><p class="phead">Panel#3</p><hr></div>
                            <div class="panel" id="p4"><p class="phead">Panel#4</p><hr></div>
                        </div><!--panel-row-->
            </div> <!--wrapper-->
        </body>
    <script src="js/Index.js" type="text/javaScript"></script>
</html>

http://codepen.io/nagasai/pen/yJzEzm

Answer 2

你应该删除活动类之后的第二个“符号。代码应该是那样的

<div id = "panel1" class = "panel active"">
    content1<br>
    content1<br>
    content1<br>
    content1<br>
    content1<br>
    </div>

你应该为每一个使用不同的id。

我制作了一个标签面板小部件，但这不能正常工作

2 个答案: