如何添加活动选择器

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

手册
国际
跟踪
联系人
安全
注册
政策
促销
疑难解答
运输
条款索赔

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

正如我在上面的评论中所说，我们在这里所做的是我们使用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)

如果您不明白这些东西的含义，请查看评论中的链接。

人们已经回答了你的活动链接问题。
所以我想我应该只关注第二个
我想到的第一件事是你不应该把东西保存在本地存储
中除了一些在整个应用程序中

真正在全球范围内使用的变量我的建议是你使用 url 参数。

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>

因此，这是如何在不使用本地存储的情况下执行此操作。我认为使用本地存储还不错，但在这种情况下，url 参数方式似乎更有意义。

我采用了之前在此处发布的示例并对其进行了一点简化，而且我认为它没有选择活动记录(即只有一个(：

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

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

您也必须从此处拉入parseParams库。

你可以试试这个：

<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作为引用。

希望有帮助。

相关内容

最新更新

热门标签：