Question

当我点击标签2时，它会显示内容以及标签1.我尝试使用prev（）隐藏上一个元素。但它隐藏了整个标签菜单，而且活动标签不会改变颜色。我已经附上了下面的jsfiddle链接 https://jsfiddle.net/nn9bqpsn/1/

print.survfit

我也尝试使用带有href的锚标签，但仍然无法正常工作。使用href https://jsfiddle.net/cL42g4sb/

连接到jsfiddle下面的标签

Answer 1

以下是我采用较长路线的千种解决方案之一，但希望它能更好地解释功能。

工作jsFiddle：Fiddle

 $(document).ready(function () {
        //Hide all Tabs on laod
        $('.Tab').hide();

        //Check which tab is active
        var activeOnLoad = $('.Tabs ul li.Active').attr("id");
        $('#'+activeOnLoad+'-content').show();

        //Handle click event
        $('.Tabs ul li').on('click', function(e){
            e.preventDefault();

          //Save clicked element to variable
           var clickedTab = $(this).attr("id");

          //Remove class from old tab
            $(this).parent().find('.Active').removeClass('Active');
          //Add Active class to clicked tab
            $(this).addClass('Active');

          //Hide all Tab elements
          $('.Tab').hide();

          //Show clicked Tab
          $('#'+clickedTab+'-content').show();
        });
    });

更新OP的新代码：

 $(document).ready(function () {
                //Hide all Tabs on laod
        $('.Tab').hide();

        //Check which tab is active
        var activeOnLoad = $('.Tabs ul li a.Active').attr("href");
        $(activeOnLoad).show();

        //Handle click event
        $('.Tabs ul li a').on('click', function(e){
            e.preventDefault();

          //Save clicked element to variable
          var clickedTab = $(this).attr("href");

          //Remove class from old tab
            $(this).parents('ul').find('.Active').removeClass('Active');
          //Add Active class to clicked tab
            $(this).addClass('Active');

          //Hide all Tab elements
          $('.Tab').hide();

          //Show clicked Tab
          $(clickedTab).show();
        });
    });

jsFiddle：jsFiddle

Answer 2

您可以使用“TAB”类隐藏元素，然后显示propper选项卡

...
    $('#tab1').click(function () {
        $('.Tab').hide();
        $('#tab1-content').show();
    });

    $('#tab2').click(function () {
        $('.Tab').hide();
        $('#tab2-content').show();

    });

    $('#tab3').click(function () {
        $('.Tab').hide();
        $('#tab3-content').show();

    });
....

JQuery选项卡显示以前的选项卡内容

2 个答案: