I used “data-target” to keep the active link style. How to maintain style even when moving pages from an active link

Question

Referring to the answer of another question, I wrote the code to preserve the style when the link is activated using "data-target". But the style disappears when moving to the next page in the active link. For example, if the original link is "link/sub01.html" but changes to "link/sub01.html&page=2", the style is lost. I want the style to be maintained whenever there is a "data-target" value in the link. But I'm not familiar with the script yet, so I don't know where to fix it. Please help me.

I didn't speak English, so I used a translator. So the sentence may not be smooth. Sorry!

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

slator. So the sentence may not be smooth. Sorry..!

Answer 1

Here is the example of trimming URL, so it will match data-target. You can check that it works. so just replace

var url = window.location;

with

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

I've just used index of to check the url is there at the start of the string.

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