我使用“数据目标”来保持活动链接样式。 即使从活动链接移动页面，如何保持样式

Question

参考另一个问题的答案，我写了代码，在使用“data-target”激活链接时保留样式。 但是当移动到活动链接中的下一页时，样式就会消失。 例如，如果原来的链接是“link/sub01.html”，但变为“link/sub01.html&page=2”，则样式丢失。 我希望在链接中有“数据目标”值时保持样式。 但是我对脚本还不熟悉，所以我不知道在哪里修复它。 请帮我。

我不会说英语，所以我用了翻译。 所以句子可能不流畅。 对不起！

 $(document).ready(function() { var url = window.location; $('.mainCateBox li a[href="' + 'data-target' + '"]').parent().addClass('active'); $('.mainCateBox li a').filter(function() { return this.href == url; }).parent().addClass('active').parent().parent().addClass('active'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style type="text/css"> .mainCateBox { position: relative; } .mainCateBox:after { display: block; content: ""; clear: both; } .mainCateBox li { position: relative; display: inline-block; width: 180px; height: 34px; float: left; line-height: 34px; text-align: center; border: 1px solid #333; border-bottom: 0; border-radius: 15px 15px 0 0; box-sizing: border-box; overflow: hidden; background: rgba(51, 51, 51, 0); transition: all .35s; } .mainCateBox li a { display: block; text-decoration: none; background: rgba(51, 51, 51, 0); transition: all .35s; } .mainCateBox li:hover { background: rgba(51, 51, 51, 1); } .mainCateBox li:hover a { color: #fff; } .mainCateBox li.active { background: rgba(51, 51, 51, 1); } .mainCateBox li.active a { color: #fff; } </style> <div id="prdListCate"> <ul class="mainCateBox"> <li data-target="index"><a href="index.html">MAIN</a></li> <li data-target="sub01"><a href="sub01.html">SUB01</a></li> <li data-target="sub02"><a href="sub02.html">SUB02</a></li> </ul> </div>

斯拉特。 所以句子可能不流畅。 对不起..！

Answer 1

这是修剪 URL 的示例，因此它将匹配数据目标。 您可以检查它是否有效。 所以只需更换

var url = window.location;

和

var url = window.location.split('&')[0];

 $(document).ready(function() { setLink = 'sub01.html&page=2'; var url = setLink.split('&')[0]; console.log(url); $('.mainCateBox li a[href="' + 'data-target' + '"]').parent().addClass('active'); $('.mainCateBox li a').filter(function() { return this.href == url; }).parent().addClass('active').parent().parent().addClass('active'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style type="text/css"> .mainCateBox { position: relative; } .mainCateBox:after { display: block; content: ""; clear: both; } .mainCateBox li { position: relative; display: inline-block; width: 180px; height: 34px; float: left; line-height: 34px; text-align: center; border: 1px solid #333; border-bottom: 0; border-radius: 15px 15px 0 0; box-sizing: border-box; overflow: hidden; background: rgba(51, 51, 51, 0); transition: all .35s; } .mainCateBox li a { display: block; text-decoration: none; background: rgba(51, 51, 51, 0); transition: all .35s; } .mainCateBox li:hover { background: rgba(51, 51, 51, 1); } .mainCateBox li:hover a { color: #fff; } .mainCateBox li.active { background: rgba(51, 51, 51, 1); } .mainCateBox li.active a { color: #fff; } </style> <div id="prdListCate"> <ul class="mainCateBox"> <li data-target="index"><a href="index.html">MAIN</a></li> <li data-target="sub01"><a href="sub01.html">SUB01</a></li> <li data-target="sub02"><a href="sub02.html">SUB02</a></li> </ul> </div>

Answer 2

我刚刚使用 index of 来检查 url 是否位于字符串的开头。

 $(document).ready(function() { var url = window.location; $('.mainCateBox li a[href="' + 'data-target' + '"]').parent().addClass('active'); $('.mainCateBox li a').filter(function() { return (this.href.indexOf(url) === 0) }).parent().addClass('active').parent().parent().addClass('active'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style type="text/css"> .mainCateBox { position: relative; } .mainCateBox:after { display: block; content: ""; clear: both; } .mainCateBox li { position: relative; display: inline-block; width: 180px; height: 34px; float: left; line-height: 34px; text-align: center; border: 1px solid #333; border-bottom: 0; border-radius: 15px 15px 0 0; box-sizing: border-box; overflow: hidden; background: rgba(51, 51, 51, 0); transition: all .35s; } .mainCateBox li a { display: block; text-decoration: none; background: rgba(51, 51, 51, 0); transition: all .35s; } .mainCateBox li:hover { background: rgba(51, 51, 51, 1); } .mainCateBox li:hover a { color: #fff; } .mainCateBox li.active { background: rgba(51, 51, 51, 1); } .mainCateBox li.active a { color: #fff; } </style> <div id="prdListCate"> <ul class="mainCateBox"> <li data-target="index"><a href="index.html">MAIN</a></li> <li data-target="sub01"><a href="sub01.html">SUB01</a></li> <li data-target="sub02"><a href="sub02.html">SUB02</a></li> </ul> </div>