I'm looking to dynamically highlight a tab, if it represents the current page. I have:
<style>
#tabs li{bg-color: white;}
body.Page1 #tabs .Page1,
body.Page2 #tabs .Page2,
body.Page3 #tabs .Page3{bg-color: orange;}
</style>
<body class="Page1 ADifferentClass">
<ul id="tabs">
<li class="Page1 SomeClass">
<li class="Page2 SomeOtherClass">
<li class="Page3 AnotherClass">
</ul>
</body>
As you can see, there needs to be CSS for each tab, so adding another page involves modifying both the HTML and the CSS. Is there a simple (DRY) way to check if two divs have the same class already built into jQuery?
I ultimately went with this:
<script>
$(document).ready(function(){
var classRE = /Page\d+/i;
var pageType = $('body').attr('className').match(classRE);
$('li.'+pageType).addClass('Highlight');
});
</script>
<style>
#tabs li{bg-color: white;}
#tabs li.Highlight{bg-color: orange;}
</style>