如何添加活动选择器 [英] How can I add an active selector

问题描述

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

I need to add an active selector so that when any of these is clicked on the active class will be bold. Also active selector needs to remain even after page is refreshed.

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

Manuals
International
Tracking
Contacts
Security
Registration
Policy
Troubleshooting
Promotions
Shipping
Terms
Claim

     <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>

推荐答案

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

So here is how you could do it without using local storage. I think using local storage isn't that bad, but the url params way seems to make more sense in this case.

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

I took the previous example posted here and simplified it a bit, also I don't think it was selecting an active record (i.e. only one):

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

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>

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

You will have to ensure that the sidebar is on the page it navigates to and also that the script dealing with active classes is on that page.

您还必须从此处插入parseParams库.

You will have to pull in the parseParams library from here too.

这篇关于如何添加活动选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！