getitem localstorage无法正常工作

Question

我正在尝试为菜单设置活动项目Cookie。

所以我使用本地存储来完成这项任务。当菜单项处于活动状态时，它将存储在本地存储中，如此 -

  <script type="text/javascript">
        $(function () {
            $('.nav-pills>li').click(function () {
                $(this).siblings().removeClass('active');
                $(this).addClass('active');

                var activeIndex = $(this).index();
                alert("Before pageload active item is "+ activeIndex);
                localStorage.setItem('mySelectValue', activeIndex);

            });
        });

    </script>

和菜单看起来像 -

然后我在窗口加载时设置了这个活动项 -

  <script type="text/javascript">
        $(window).load(function () {
            var activeIndex = localStorage.getItem('mySelectValue');
            alert("After pageload active item is " + activeIndex);

            $('.nav-pills li:nth-child("' + activeIndex + '")').addClass('active');

        });

    </script>

现在

菜单 -

在这里，您可以从两个图像中看到活动菜单的索引仍然是页面加载之前的最后一个索引。但是这不是在这个菜单项上应用.active类。

如何设置此菜单项？

Answer 1

从

改变

$('.nav-pills li:nth-child("' + activeIndex + '")').addClass('active');

到这个

$('.nav-pills li:eq("' + activeIndex + '")').addClass('active');

或删除双引号

 $('.nav-pills li:nth-child(' + activeIndex + ')').addClass('active');

但是nth-child是基于1的索引，其中eq是基于零的索引

检查http://jsfiddle.net/HLUB9/2/