Menu
So I'm trying to use javascript to create an internal style sheet in the header, but its not working. This point of this script would be to have the tab for the page that I'm on be highlighted.
Below is not the actual site i'm implementing it on, just testing - but its not working correctly. Is this even possible? Yes I know I could do it with inline css or something but that would be must more confusing !
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function parseUrl( url ) {
var a = document.createElement('a');
a.href = url;
return a;
}
var page=parseUrl('').search
function getSecondPart(str) {
return str.split('=')[1];
}
var site=getSecondPart(page));
text.innerHTML('<style type="text/css">
."nav_"' + page + '" {background-color:red;} {color=green;} </style>')
}
</style>"
</script>
</head>
<body>
<ul>
<li class="nav_home"><a href="testtest.html?site=home">Home</a>
<li class="nav_forum"><a href="testtest.html?site=forum"/>Forum</a>
<li class="nav_help"><a href="testtest.html?site=help"/>Help</a>
<li class="nav_roster"><a href="testtest.html?site=roster"/>Roster<a/>
</body>
</html>
486
asked Mar 07 '26 03:03
There are two proper solutions, which are not what you're asking for but solve your problem.
The first way is to use a distinct nav class in each of your lis. That's what you should have been doing all along.
The preferred way:
<li class="nav" id="home"> ...
You can alternatively do this, but it's not a good idea, because the home li is unique.
<li class="nav nav-home"> ...
with
li.nav {
background-color: red;
color: green;
}
The second way is to use a CSS3 attribute selector. However, this may not work on all browsers:
li[class^="nav"] {
background-color: red;
color: green;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
