有没有办法在 JQuery 中切换选项卡？

Posted 2023-03-28

【中文标题】有没有办法在 JQuery 中切换选项卡？

【英文标题】：Is There a Way of Switching Tabs in JQuery?

【发布时间】：2012-02-15 14:11:50

【问题描述】：

首先我想在我忘记之前给你链接。

http://www.roblox.com/User.aspx?ID=1

在页面底部有多个选项卡。 （齿轮、帽子、面孔、包裹等）

function checkForHat() 
    $.get (
        'http://www.roblox.com/User.aspx?ID=1',

        function parse(data) 
            var hatid1 = $(data).find('#ctl00_cphRoblox_rbxUserAssetsPane_UserAssetsDataList_ctl00_AssetThumbnailHyperLink');
            var hatidtitle1 = hatid1.attr('title');
            var hatidhref1 = "http://www.roblox.com" + hatid1.attr('href');
            var hatidpi1 = $(hatid1).find('img')
            var hatidpic1 = hatidpi1.attr('src')
            hatLink1 = hatidhref1;
            hatTitle1 = hatidtitle1;
            hatPic1 = hatidpic1;
            var hatid2 = $(data).find('#ctl00_cphRoblox_rbxUserAssetsPane_UserAssetsDataList_ctl01_AssetThumbnailHyperLink');
            var hatidtitle2 = hatid2.attr('title');
            var hatidhref2 = "http://www.roblox.com" + hatid2.attr('href');
            var hatidpi2 = $(hatid2).find('img')
            var hatidpic2 = hatidpi2.attr('src')
            hatLink2 = hatidhref2;
            hatTitle2 = hatidtitle2;
            hatPic2 = hatidpic2;
            var hatid3 = $(data).find('#ctl00_cphRoblox_rbxUserAssetsPane_UserAssetsDataList_ctl02_AssetThumbnailHyperLink');
            var hatidtitle3 = hatid3.attr('title');
            var hatidhref3 = "http://www.roblox.com" + hatid3.attr('href');
            var hatidpi3 = $(hatid3).find('img')
            var hatidpic3 = hatidpi3.attr('src')
            hatLink3 = hatidhref3;
            hatTitle3 = hatidtitle3;
            hatPic3 = hatidpic3;
            if (hatLink3 != null && hatTitle3 != null && hatPic3 != null) 
                checkIfNew3();
            
            if (hatLink2 != null && hatTitle2 != null && hatPic2 != null) 
                checkIfNew2();
            
            if (hatLink1 != null && hatTitle1 != null && hatPic1 != null) 
                checkIfNew1();
            
        
    );
;

当然，有些变量已经在前面的代码中调用过。

现在我的问题是如何使用 JQuery 更改选项卡。就像我说的那样，标签朝底部。

这个答案开始变得至关重要，因为我有很多要求升级它所在的 chrome 扩展的请求。

谢谢。

【问题讨论】：

你在说什么标签？问题中的代码与“使用 jQuery 切换选项卡”有何关系？

看起来是 AJAX/json 的完美工作

【参考方案1】：

似乎用于执行选项卡切换的 javascript 保存在 href 属性中。您可以对该方法执行 eval。

//this will click the shirts tab     
eval($('#ctl00_cphRoblox_rbxUserAssetsPane_AssetCategoryRepeater_ctl05_AssetCategorySelector').attr('href'))

如果你想要更健壮的东西，那么：

$shirtElem = $('#assetsMenu a').filter( function() 
     if ($(this).html() == 'Shirts') return true;
);
eval($shirtElem.attr('href'));

我不喜欢它，但这看起来像自动生成的 Visual Studio 代码，这意味着它会很丑陋且难以使用 =)。我还假设您对源没有任何控制权，否则这会简单得多。

【讨论】：

什么不起作用？此代码适用于已添加到 DOM 的元素。

它暂停异常：'ReferenceError'

在function parse(data) 之后我添加了eval($(data).find('#ctl00_cphRoblox_rbxUserAssetsPane_AssetCategoryRepeater_ctl05_AssetCategorySelector').attr('href')) 在那一行出错。

我不知道来自 href 的 javascript 是做什么的。完成向其附加元素后，它必须依赖页面上的某些内容。