Question

我正在尝试使用jquery，css和html为我的网站创建一个标签系统，当标签标题全部合并但我希望将它们分开时我得到了它，所以一些标签标题在一边页面和其余部分正好相反。这一切看起来都不错，当我点击选项卡标题时，标签会更改，但标题不会删除上一个标签上的活动状态，这必须是因为我将它们分开。

Jquery的：

jQuery(document).ready(function() {
            jQuery('.tabs .tab-links-left a').on('click', function(e)  {
                var currentAttrValue = jQuery(this).attr('href');

                // Show/Hide Tabs
                jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

                // Change/remove current tab to active
                jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

                //My added code
                jQuery('.tabs .tab-links-right').siblings().removeClass('active');

                e.preventDefault();
            });
        });



        jQuery(document).ready(function() {
            jQuery('.tabs .tab-links-right a').on('click', function(e)  {
                var currentAttrValue = jQuery(this).attr('href');

                // Show/Hide Tabs
                jQuery('.tabs ' + currentAttrValue).show().siblings().hide();


                // Change/remove current tab to active
                jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

                //My added code
                jQuery('.tabs .tab-links-left li').siblings().removeClass('active');

                e.preventDefault();
            });
        });

这是标题的html

               <ul class="tab-links-left" >
                    <li class="active"><a href="#tab1">Home</a></li>
                    <li><a href="#tab2">Gallery</a></li>
                    <li><a href="#tab3">Services</a></li>


                </ul>

                <ul class="tab-links-right" >

                    <li><a href="#tab4">Testimonials</a></li>
                    <li><a href="#tab5">Contact</a></li>

                </ul>

Answer 1

您的问题是对面的标签不是

.siblings()

另一方面。

我建议您为所有标签提供一个类

<li class="tab">

然后在单击选项卡时执行以下操作：

jQuery('.tab').removeClass('active'); //Remove the active state from all tabs
jQuery(this).parent('li').addClass('active'); //Add the active state to the clicked tab

拆分选项卡标题不删除活动状态

1 个答案: