Question

我有一个侧面导航栏：

<li class="side-nav-tab">
  <a href="/item"><i class="fa fa-dashboard fa-fw"></i> Items<span></span></a>
</li>

<li class="side-nav-tab">
  <a href="/client"><i class="fa fa-bar-chart-o fa-fw"></i> Clients<span></span></a>
</li>

<li class="side-nav-tab">
  <a href="/quote"><i class="fa fa-table fa-fw"></i> Quotes<span></span></a>
</li>

jQuery：

    $(document).ready(function(){
        $('.side-nav-tab').on('click', function(){
          var arrow = $(this).find('span').attr('class');

          if ((arrow == undefined) || (arrow == '')) {
            $('.side-nav-tab').find('span').not(this).removeClass('fa arrow');
            $(this).find('span').addClass('fa arrow');
          }

        })
    })

上面的代码有效（将类'fa箭头'添加到跨度），但它只是暂时的。问题是，当你点击$（'。side-nav-tab'）时，它会引导你到达那条路线，重新加载一个页面，然后我丢失了刚刚添加的'fa arrow'类。

在做了一些研究之后，似乎我可以使用localStorage，但尝试不成功：

var storage = localStore.getItem(arrow)

有什么想法吗？

由于

Answer 1

请勿尝试使用localstorage。正确而简单的方法是使用preventDefault()来防止链接被触发。试试这个事件处理程序：

$('.side-nav-tab').on('click', function(e){
  e.preventDefault();
  var arrow = $(this).find('span').attr('class');
  if ((arrow == undefined) || (arrow == '')) {
        $('.side-nav-tab').find('span').not(this).removeClass('fa arrow');
        $(this).find('span').addClass('fa arrow');
   }
 });

在Javascript中使用LocalStorage

1 个答案: