Question

我遇到以下代码的问题。我的导航 Tab-1＆amp;中有两个标签。 Tab-2 ，当用户点击任何标签页时，我想向其添加活动类，同时我想从之前的活动标签中删除活动类。此外，当前处于活动状态的选项卡应显示其内容，并且必须隐藏其余内容。这意味着当用户点击任何标签时，它应仅显示其内容，并且应隐藏其他内容。请帮帮我谢谢。

<style>
    .wrapper .tabs {
        display: none;
    }
    .wrapper .tabs.active {
        display: block;
    }
</style>

<div class="wrapper">

    <!-- Navigation -->
    <ul class="nav">
        <li class="active"><a href="#tab-1">Tab-1</a></li>
        <li><a href="#tab-2">Tab-2</a></li>
    </ul>

    <!-- Panel-1 -->
    <div id="tab-1" class="tabs active">
        <p>Tab-1 Content</p>
    </div>

    <!-- Panel-2 -->
    <div id="tab-2" class="tabs">
        <p>Tab-2 Content</p>
    </div>

</div>

<!-- Script -->
<script>
    $(document).ready(function () {
        $('.nav li').click(function() {
            $('.nav li.active').removeClass('active');
            $(this).addClass('active');
        });

        // To display content for active class only
        $('.nav li').click(function() {
            $('.wrapper .tabs.active').removeClass('active');
            $(this).addClass('active');
        });
    });
</script>

Answer 1

您可以在<meta>附加到选择器<form method="post" action="http://www.htmlcodetutorial.com/cgi-bin/mycgi.pl" id="configForm" onsubmit="alert(typeof validate);validate()" target="_blank">的{{1}}事件中使用.eq()，.index()，选择click以"a[href^='#tab-']"开头的元素，创建href以#tab-开头的变量引用元素，在id函数内调用tab-以防止导航到文档片段，event.preventDefault()，click

＆＃13;

.hide()

＆＃13;

.show()

＆＃13;

   $(document).ready(function() {
     var a = $("a[href^='#tab-']");
     var tabs = $("[id^=tab]");
     a.click(function(e) {
       e.preventDefault();
       tabs.hide().eq(a.index(this)).show()
     })
   })

＆＃13;

jQuery在用户单击时动态添加和删除类

1 个答案: