Can someone assist me with this re-upload?
I need help tweaking my code to maintain style when navigating between pages using the "data-target" attribute. Currently, the style is being lost when moving from the original link (e.g., "link/sub01.html") to a modified link (e.g., "link/sub01.html&page=2"). I want the style to persist whenever there's a "data-target" value in the link. However, I'm not very familiar with scripting and don't know where to make the necessary adjustments. Any guidance would be greatly appreciated.
Please excuse any language discrepancies as English isn't my primary language, so I'm relying on a translator tool. Thank you for your understanding!
$(document).ready(function() {
var url = window.location;
$('#CateList .CateBox li a[href="' + 'data-target' + '"]').parent().addClass('active');
$('#CateList .CateBox 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">
.CateBox {
position: relative;
}
.CateBox:after {
display: block;
content: "";
clear: both;
}
.CateBox 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;
}
.CateBox li a {
display: block;
text-decoration: none;
background: rgba(51, 51, 51, 0);
transition: all .35s;
}
.CateBox li:hover {
background: rgba(51, 51, 51, 1);
}
.CateBox li:hover a {
color: #fff;
}
.CateBox li.active {
background: rgba(51, 51, 51, 1);
}
.CateBox li.active a {
color: #fff;
}
</style>
<div id="CateList">
<ul class="CateBox">
<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>