Question

我编写了一个快速而又脏的解决方案，使用localStorage（实际上在store.js shim的帮助下）存储（并激活）页面请求中最后选择的Bootstrap 3导航选项卡窗格。它似乎工作正常，是的，我不擅长JavaScript。

无论如何，脚本可以存储根据window.location.href和导航标签id属性计算的密钥：

<!-- Nav tabs -->
<ul id="nav-tab-settings" class="nav nav-tabs nav-remember">
    <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#messages" data-toggle="tab">Messages</a></li>
    <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane active" id="home"><h2>Home</h2></div>
    <div class="tab-pane" id="profile"><h2>Profile</h2></div>
    <div class="tab-pane" id="messages"><h2>Messages</h2></div>
    <div class="tab-pane" id="settings"><h2>Settings</h2></div>
</div>

问题：导航标签中的id属性在Bootstrap 3中不是必需的。我可以在不强制设置id属性的情况下使我的脚本正常工作吗？有没有办法识别没有id（可能是它的位置）的DOM元素？如果同一页面在请求之间返回稍微修改的DOM会怎么样？

如果有问题，这里是脚本navs-remember.js：

(function ($, store) {
    // Storage not available
    if (!store.enabled) {
        return;
    }

    $(function () {               
        var tabsSelector = '.nav.nav-tabs.nav-remember[id]',
            toggleSelector = 'a[data-toggle="tab"][href]';

        // Identify each nav tabs by current location and its id 
        var computeStorageKey = function (navId) {
            return window.location.href + '#' + navId;
        };

        // Restore last selected tab
        $(tabsSelector).each(function () {
            var nav = $(this),
                navId = nav.attr('id'),
                storedActiveHref = store.get(computeStorageKey(navId)),
                lastActiveToggle = null;

            if (!navId.length || (undefined === storedActiveHref)) {
                return;
            }

            // Get the toggle itself
            lastActiveToggle = nav.find('a[href="' + storedActiveHref + '"]')
                .first();

            // Show the tab
            if (lastActiveToggle.length) {
                lastActiveToggle.tab('show');
            }
        });

        $(tabsSelector + ' ' + toggleSelector).click(function () {
            var toggle = $(this),
                toggleHref = toggle.attr('href'),
                nav = toggle.closest(tabsSelector),
                navId = nav.attr('id');

            // Store toggle href attribute value
            if (toggleHref.length && nav.length && navId.length) {
                store.set(computeStorageKey(navId), toggleHref);
            }
        });
    });
}(jQuery, store));

Answer 1

您可以使用jQuery.eq(index)按位置放置在jquery结果中，因此要获取“主页”标签，您需要查找$("tabselector li").eq(0)

请注意，它基于0。

文档：https://api.jquery.com/eq/

如果DOM元素没有id属性，请在请求之间标识DOM元素？

1 个答案: