开发者

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜