我使用“數據目標”來保持活動鏈接樣式。 即使從活動鏈接移動頁面，如何保持樣式

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>