Javascript 如果DOM元素没有'；你没有id属性吗？

我使用

localStorage

（实际上是在shim的帮助下）编写了一个快速而肮脏的解决方案来存储（并激活）页面请求上最后选择的Bootstrap 3 nav tabs窗格。它似乎工作得很好，是的，我不太擅长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>

---

您可以使用

jquery.eq（index）

将其按位置放置在jquery结果中，因此要获得“主页”选项卡，您需要查找

$（“tabselector li”）.eq（0）

请注意，它是基于0的

---

---

文档：

问题在于在localStorage中唯一存储导航选项卡首选项。因为您可以在不同的页面中使用相同id的不同导航选项卡。有没有不使用id属性的方法可以做到这一点？@gremo如果他们在不同的页面中，因为你是用页面的id和URL来计算的，那么他们在不同的页面上有相同的id肯定不是问题。如果您只反对元素的ID，您可以给它一个属性，如

数据选项卡ID=“GUID”

，否则您可以得到它的父元素（如果它可能共享父元素，则可以从中获得

.eq

）。如果您上传一个JSFIDLE，可能更容易看到您的问题所在。

(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));