Highlighting menu items
I have a master page with a vertical menu and a IFrame.inside the IFrame i'm lo开发者_运维技巧ading pages on menu items click.i need to highlight the link inside the menu of the currently visited page.how can i achieve this
Hope the following code helps you:
Write the following jQuery code in document.ready and will be called in menu click.
$( document ).ready( function() {
$( '#nav ul li' ).click( function() {
$( '#nav ul' ).children('li').removeClass();
$( this ).addClass( 'selected' );
});
});
The class definition should be as follows:
#nav .selected a{background:red;display:block}
See the menu section:
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
add each link inside a div tag
<div onclick="highlightLink(this);" style="height:22px">
<a href="" class="menulinks">Customer</a>
</div>
then use the following javascrip
<script language="javascript" type="text/javascript">
var highlightLink = function () {
var active = null, Image = 'url("images/selectedmenubg.jpg"); width:183px; height:21;';
if (this.attachEvent) this.attachEvent('onunload', function () {
active = null;
});
return function (element) {
if ((active != element) && element.style) {
if (active) active.style.backgroundImage = '';
element.style.backgroundImage = Image;
active = element;
}
};
} ();
</script>
selectedmenubg.jpg is the backgroud of the selected link
精彩评论