Hello, I have an unordered list with some list elements and I am trying to apply a CSS style to highlight the selected list element. However, the style is not taking effect as expected.
function HighlightSelectedElement(ctrl) {
var list = document.getElementById("myslidemenu").getElementsByTagName('li');
for (i = 0; i < list.length; i++) {
list[i].style.color = "blue";
}
ctrl.style.color = 'white';
}
Here is how my HTML structure looks:
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li onclick="HighlightSelectedElement(this);"><a href="Dashboard.aspx">Dashboard</a>
</li>
<li onclick="HighlightSelectedElement(this);"><a href="Geofence.aspx">Geofence</a>
</li>
<li onclick="HighlightSelectedElement(this);"><a href="Personnel.aspx">Personnel</a>
</li>
</ul>
<br style="clear: left" />
</div>
The parent div tag contains another inner div tag. Is there a way to override the inner div tag and make changes to the selected list item in the ul?
My CSS code is structured like this:
.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: Yellow;
}
.jqueryslidemenu{
font: bold 12px Arial;
background: #414141;
width: 100%;
}
.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
height: 1%;
}