Question

我正在使用JQuery在标签之间进行更改。我遇到的问题是，在第一个选项卡中，它提供了一组指向所有不同选项卡的类别链接。有点像，您可以浏览所有标签以查找所需内容，或点击链接转到标签页。

链接在页面上工作，并带您进入正确的选项卡。但它不会更改选项卡的活动状态并删除旧选项卡的活动状态。它只是改变显示哪个选项卡。因此标签导航不会改变。

第一个脚本处理主要的实际标签。

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

    // Show/Hide Tabs
    $('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide();

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

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

此第二个脚本处理页面上的链接，该链接将打开特定选项卡而不单击选项卡按钮本身。

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



    // Show/Hide Tabs
    $('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide();

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


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

我希望如此，如果我点击.tab-links1列表中的链接，它会更改其他列表的类.tab-links这样它会删除旧选项卡的活动状态并使打开的选项卡显示为活动状态

基本上它是一个实际上没有点击标签本身的链接。这是标签内的链接。我希望我正在解释这一点。

非常感谢任何帮助。

Answer 1

最佳做法是创建一个处理标签的功能。

例如：

function handleTabs(name) {
    /* Handle active state */
    $('.tabs li').removeClass('active');
    $('.tabs li.' + name).addClass('active');

    /* Handle visibility tabs */
    Code to handle the visibility
}

$('.tablinks a').on('click', function() {
    var tabname = $(this).attr('href').split('#');
    handleTabs( tabname[1] );
});

HTML

 <a href="#tabname">Link</a>

使用这种方法，您可以处理来自多个地方的标签

JQuery：如何从另一个链接更改活动表类？

1 个答案: