如何添加活动选择器

Question

我需要添加一个活动选择器，以便在活动类上单击任何一个时，它们将为粗体。此外，即使刷新页面后，活动选择器也需要保留。

手册
国际
跟踪
联系人
安全性
注册
政策
故障排除
促销
运送
条款
声明

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="container-inner">
    {{breadcrumbs}}
    <div class="search-box search-box_page">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 26">
    <path d="M20,18.9c1.6-2.1,2.4-4.6,2.4-7.2c0-6.4-5-11.7-11.2-11.7C5,0,0,5.3,0,11.7s5,11.7,11.2,11.7
          c2.5,0,5-0.9,6.9-2.5l4.6,4.8c0.3,0.3,0.6,0.4,0.9,0.4c0.3,0,0.7-0.1,0.9-0.4c0.5-0.6,0.5-1.4,0-2L20,18.9z M20,12
          c0,4.9-3.8,9-8.5,9s-9.1-4.1-9.1-9s4.4-9.5,9.1-9.5S20,7,20,12z"/>
  </svg>
  {{search instant=true placeholder=settings.search_placeholder}}
</div>

        <div class="section group">
    <div class="left-nav col span_1_of_2_">
    <h2 class="leftnav-title">Support</h2>
        <ul style="color:#333;">
      <a class="link-leftbar" href="www.test1.com"><li>Manuals</li></a>
      <a class="link-leftbar" href="www.test2.com"><li>International</li></a>
      <a class="link-leftbar" href="www.test3.com"><li>Tracking</li></a>
      <a class="link-leftbar" href="www.test4.com"><li>Contacts</li></a>
      <a class="link-leftbar" href="www.test5.com"><li>Security</li></a>
      <a class="link-leftbar" href="www.test6.com"><li>Registration</li></a>
      <a class="link-leftbar" href="www.test7.com"><li>Policy</li></a>
      <a class="link-leftbar" href="www.test8.com"><li>Troubleshooting</li></a>
      <a class="link-leftbar" href="www.test9.com"><li>Promotions</li></a>
      <a class="link-leftbar" href="www.test10.com"><li>Shipping</li></a>
      <a class="link-leftbar" href="www.test11.com"><li>Terms</li></a>
      <a class="link-leftbar" href="www.test12.com"><li>Claim</li></a>
      </ul>
    </div>
    <div class="col span_1_of_2">
        <div style="" class="category-tree" id="section">
      <section class="category-tree__item">
        <h2 class="category-tree__title">{{section.name}}</h2>
      <div class="accordion-wrapper">
  {{#each section.articles}}
  <ul data-toggle="collapse" data-target="#{{id}}" class="article-list article-list_page">
    <li class="article-list__item">
      <a href="javascript:void(0);" style="cursor: default;" class="art-title">{{title}}</a>
      <article style="font-weight:100;" id="{{id}}" class="article-body collapse art-body">
      {{body}}
      </article>
    </li>
  </ul>
  {{/each}}
</div>
    </div>
</div>


      </section>
      {{pagination}}
    </div>

  </div>
</div>

Answer 1

正如我在上面的评论中所述，我们在这里所做的是使用localStorage.setItem保存活动链接，使用localStorage.getItem检索它们的值。然后.addEventListner和.removeEventListener确保一旦单击链接，它将把类active添加到我们的链接和localStorage中。

function makeActive(event) {
  event.target.classList.add('active')
  event.target.removeEventListener('click', makeActive)
  localStorage.setItem(event.target.href, 'active')
}


document
  .querySelectorAll('a.link-leftbar:not(.active)')
  .forEach(link => link.addEventListner('click', makeActive))

function setActiveLinksClass() {
  document
    .querySelectorAll('a.link-leftbar')
    .forEach(link => {
      if (localStorage.getItem(link.href) !== null)
        link.classList.add('active')
    })

document
  .addEventListener('DOMContentLoaded', setActiveLinksClass)

如果您不了解这些内容的含义，请查看注释中的链接。

Answer 2

人们已经回答了您的活动链接问题。
所以我认为我应该只专注于第二个
我想到的第一件事就是，您不应该在本地存储中保存任何内容
除了在整个应用程序中真正在全球范围内使用的某些变量之外，

我的建议是您使用网址参数。

https://exampleurl.com?active[]=manual&active=tracking&...

然后使用

$.parseParams( url.split('?')[1] || '' );//result would be {active: ['manual', 'tracking',... ]}

这有什么好处？
首先，您将能够根据需要刷新页面和仍然存在的内容。

其次，用户转到https://exampleurl.com，所有活动过滤器都消失了，而不必自己手动删除活动链接。

第三，您不必处理本地存储，当您进行应用扩展时，它会变得越来越复杂，并且弄乱本地存储不是一个好主意。

最后，用户实际上可以使用https://exampleurl.com?active[]=manual访问您的页面，他们仍然可以看到上面带有正确网址的“手册”活动链接。

<ul>
  <a class="link-leftbar" id="manual" onClick="onClickLink('manual')" href="www.test1.com"><li>Manuals</li></a>
  <a class="link-leftbar" id="inter" onClick="onClickLink('inter')" href="www.test2.com"><li>International</li></a>
  <a class="link-leftbar" id="tracking" href="www.test3.com"><li>Tracking</li></a>
  ......
</ul>


<script>
  var selectedIds = [];
  function onClickLink(id) {
    var selectedItem = document.querySelector('#' + id);
    var isSelected = selectedItem.classList.contain('active');
    if (!isSelected) {
      this.selectedItem.classList.add('active');
    } else {
      this.selectedItem.classList.remove('active');
    }

    newStateUrl(id);//Only push newState to your url, later refresh still remain with all selectedIds.
  }

  function newStateUrl(id) {
    var idx = selectedIds.indexOf(id);
    if (idx === -1) {
      selectedIds.push(id);
    } else {
      selectedIds = selectedIds.splice(idx, 1);
    }

    var newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname;
    var params = '?' + $.param({active: selectedIds});//?active%5b%5D=manual&active%B%5D=tracking
    newUrl += params;
    window.history.pushState({path: newUrl},'', newUrl);
  }

  //This is for when you access the page for the first time
 $(document).ready(function() {
   selectedIds = [];
   var url = window.location.href;
   // You can look up the parseParams from this link
   // https://gist.github.com/kares/956897
   params = $.parseParams( url.split('?')[1] || '' );
   params.forEach(function(param)b{
     onClinkLink(id);
   });
 });

</script>

Answer 3

因此，这是不使用本地存储即可完成的操作。我认为使用本地存储还不错，但是在这种情况下，使用url params方法似乎更有意义。

我采用了此处发布的上一个示例，并对其进行了简化，而且我不认为它正在选择活动记录（即，仅一个）：

CSS

<style>
        .active {
            font-weight: bold;
        }
    </style>

HTML

<ul>
    <li>
        <a class="link-leftbar" id="manuals" onClick="setActiveLink('manuals')" href="">
            Manuals
        </a>
    </li>
    <li>
        <a class="link-leftbar" id="international" onClick="setActiveLink('international')" href="">
            International
        </a>
    </li>
    <li>
        <a class="link-leftbar" id="tracking" onClick="setActiveLink('tracking')" href="">
            Tracking
        </a>
    </li>
</ul>

JavaScript / jQuery

<script>
    const setActiveLink = linkName => {
        const
            baseUrl = window.location.href.split('?')[0],
            newUrl = baseUrl + '?' + $.param({active: linkName});

        $('.link-leftbar')
            .removeClass('active')
            .filter('#' + linkName)
            .addClass('active');

        window.history.pushState({path: newUrl}, '', newUrl);
    }

    $(document).ready(function () {
        const params = $.parseParams(window.location.href.split('?')[1] || '');

        setActiveLink(params.active);
    });
</script>

您必须确保侧边栏位于其导航到的页面上，并且该页面上还包含处理活动类的脚本。

您还必须从here中提取parseParams库。

Answer 4

您可以尝试以下方法：

HTML

<ul>
    <a class="link-leftbar" href="www.test1.com"><li>Manuals</li></a>
    <a class="link-leftbar" href="www.test2.com"><li>International</li></a>
    <a class="link-leftbar" href="www.test3.com"><li>Tracking</li></a>
    <a class="link-leftbar" href="www.test4.com"><li>Contacts</li></a>
    <a class="link-leftbar" href="www.test5.com"><li>Security</li></a>
    <a class="link-leftbar" href="www.test6.com"><li>Registration</li></a>
    <a class="link-leftbar" href="www.test7.com"><li>Policy</li></a>
    <a class="link-leftbar" href="www.test8.com"><li>Troubleshooting</li></a>
    <a class="link-leftbar" href="www.test9.com"><li>Promotions</li></a>
    <a class="link-leftbar" href="www.test10.com"><li>Shipping</li></a>
    <a class="link-leftbar" href="www.test11.com"><li>Terms</li></a>
    <a class="link-leftbar" href="www.test12.com"><li>Claim</li></a>
</ul>

CSS

.active {
    font-weight: bold
}

JavaScript

const buttons = document.querySelectorAll(".link-leftbar");
let activeUrl = localStorage.getItem('activeLink'), activeLink;

buttons.forEach(button => {
    if (activeUrl === button.href) {
        button.classList.add('active')
    }
});

buttons.forEach(currentButton => currentButton.addEventListener("click", function (event) {
        event.preventDefault();

        buttons.forEach(button => button.classList.remove('active'));

        currentButton.classList.add('active');

        activeLink = document.querySelector('.active');
        localStorage.setItem('activeLink', activeLink);
    }
));

这有点脆弱（例如，如果更改地址，则可能会中断），但是它会在单击时设置活动类，并在刷新页面后记住结果

它是如何工作的，它将链接设置为html集合，您可以使用forEach遍历。

然后还设置了activeUrl（如果尚未设置，则未定义）。

然后循环浏览链接，如果activeUrl地址与给定链接相同，则会将活动类添加到该链接。

然后，它再次循环链接以为每个链接设置一个事件处理程序。

在事件处理程序中，单击链接时，它将删除任何链接上的任何现有活动类，然后将活动类添加到该链接。

最后，事件处理程序将该链接地址存储为activeUrl，以便在重新加载页面时进行检查。

它在工作吗：https://jsfiddle.net/q0vgw8yk/

-编辑-

jQuery

$(document).ready(function () {
    $('.link-leftbar')
        .on('click', function (event) {
            event.preventDefault();

            $('.active').removeClass('active');

            $(this).addClass('active');

            localStorage.setItem('activeLink', $(this).text());
        })
        .filter(function () {
            return $(this).text() === localStorage.getItem('activeLink')
        })
        .addClass('active');
});

jQuery通过link-leftbar类遍历所有链接，为每个链接添加一个事件处理程序，然后将其全部过滤到与本地存储的活动链接匹配的事件处理程序，然后向其中添加一个活动类。

在事件处理程序内部，它将活动类从当前具有该类的链接中删除，然后将其添加到被单击的链接中。

单击链接时，将使用event.preventDefault方法。这将停止链接执行应做的事情。如果您希望它转到链接，则必须添加它。您应该能够相当轻松地找到所需的内容。

然后它将活动链接存储在本地，尽管这次它使用链接的html作为参考。

希望有帮助。