突出显示菜单项答案

【问题标题】：Highlighting menu items突出显示菜单项
【发布时间】：2011-06-30 05:24:55
【问题描述】：

我有一个带有垂直菜单和 IFrame 的母版页。在 IFrame 内我正在单击菜单项上加载页面。我需要突出显示当前访问页面的菜单内的链接。我该如何实现这一点

【问题讨论】：

嗨，你是怎么解决这个问题的？
我已经添加了一个答案。这就是我解决它的方法

【解决方案1】：

希望以下代码对您有所帮助：

在 document.ready 中编写以下 jQuery 代码，将在菜单点击中调用。

          $( document ).ready( function() {
             $( '#nav ul li' ).click( function() {
                $( '#nav ul' ).children('li').removeClass();
                $( this ).addClass( 'selected' );
             });
          });

类定义如下：

          #nav .selected a{background:red;display:block}

查看菜单部分：

         <div id="nav">
           <ul>    
              <li><a href="#">Home</a></li>
              <li><a href="#">Blog</a></li>
              <li><a href="#">About</a></li>
           </ul>
         </div>

【讨论】：

【解决方案2】：

在 div 标签内添加每个链接

     <div onclick="highlightLink(this);" style="height:22px">
 <a href="" class="menulinks">Customer</a>
</div>

然后使用下面的 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 是选中链接的背景

【讨论】：