当我移动arround页面时，保持链接处于活动状态，直到我选择另一个链接

问题描述：

我遇到链接问题，我创建了一个由链接制作的菜单，同时指示用户在哪个部分中。菜单工作正常，但是当我开始在该链接下的部分上进行操作时（它是伪类活动的，因为它已被选中），那么选择的链接将变为正常链接，因此用户将失去方向。当我移动arround页面时，保持链接处于活动状态，直到我选择另一个链接

我不认为代码是必要的，但只是为了防止任何人需要它。

.menu 
{ 
    width:100%; 
    text-align:center; 



    } 
.menu a 
{ 
    height:30px; 
    width:170px; 
    background-image:url('../Images/item.png'); 
    background-repeat:no-repeat; 
    background-position:center; 
    color:Black; 
    font-weight: bold; 
    font-family: Arial; 
    font-size: 11px; 
    text-decoration: none; 
    cursor:pointer; 
    word-spacing:-1px; 
    border:none; 
    padding:1px 0px 0px 0px; 
    margin-top:1px; 
    } 

.menu a:hover 
{ 
    background-image:url('../Images/itemHover.png'); 
    background-repeat:no-repeat; 
    background-position:center; 
    font-weight: bold; 
    font-family: Arial; 
    font-size: 11px; 
    text-decoration: none; 
    cursor:pointer; 
    word-spacing:-1px; 

    } 
.menu a:active 
{ 
    background-image:url('../Images/itemActive.png'); 
    background-repeat:no-repeat; 
    background-position:center; 
    color:White; 
    font-weight: bold; 
    font-family: Arial; 
    font-size: 11px; 
    text-decoration: none; 
    cursor:pointer; 
    word-spacing:-1px; 
    text-decoration: none; 
    } 




      <div class="menu" > 
       <a href='vbscript:show(0)' id='focusme'>Section1</a> 
       <a href='vbscript:show(6)'> Section2 </a> 
       <a href='vbscript:show(2)'> Section3 </a> 
       <a href='vbscript:show(3)'> Section4 </a> 
       <a href='vbscript:show(4)'> Section5</a> 
       <a href='vbscript:show(5)'> Section6 </a> 
       <a href='vbscript:show(1)'> Section7</a> 
       <a href='vbscript:show(7)'> Section8 </a> 
       <a href='vbscript:show(8)'> Section9 </a> 
       <a href="javascript:calllast24()"> Section10</a> 
      </div>

有人能给我一个提示吗？

答

只是a:active定义另一个类active在一起，并且类添加到动态有问题的链接（并从菜单中的任何其他链接删除同一类）。

JavaScript/jQuery完全适用于此目的。例如。

$('.menu a').click(function() { 
    $('.menu a').removeClass('active'); 
    $(this).addClass('active'); 
}

更新：或者，如果这些链接实际上是同步的，你实际使用的服务器端视图技术，如PHP/JSP/ASP，那么你就需要抓住其权力来代替。这里有一个JSP示例：

<ul id="menu"> 
    <li><a href="foo" ${page == 'foo' ? 'class="active"' : ''}">foo</a></li> 
    <li><a href="bar" ${page == 'bar' ? 'class="active"' : ''}">bar</a></li> 
    <li><a href="boo" ${page == 'boo' ? 'class="active"' : ''}">boo</a></li> 
</ul>

上面的例子只是增加class="active"在当前页面的链接的href匹配。你可以在PHP中做类似的操作（即三元操作符）。虽然不确定ASP。

听起来不错，但我对jquery一无所知，你能举一个更广泛的例子吗？请？当我加载页面时，为什么会出现脚本错误？我该如何调用此功能？谢谢。 – Amra 2010-01-28 14:46:56

您基本上需要在'$（document）.ready（）'中加载它。对不起，我认为这对web开发者来说已经足够明显了。在jQuery主页上查看教程，了解关于jQuery的更多信息:) – BalusC 2010-01-28 14:48:49

Darm，感谢您的帮助，不幸的是，我正在做xsl文件，并且抱怨着sintax。我不能使用CDDATA标签，因为它会被浏览器解释为文本。无论如何，谢谢。塞萨尔。 – Amra 2010-01-28 15:02:23

答

当单击JavaScript时，使用JavaScript添加类似“current”的类名到当前选定的链接。

您可以回收“悬停”类或制作一个独特的类。

.menu a:active, .menu a.current 
{ 
    background-image:url('../Images/itemActive.png'); 
    background-repeat:no-repeat; 
    background-position:center; 
    color:White; 
    font-weight: bold; 
    font-family: Arial; 
    font-size: 11px; 
    text-decoration: none; 
    cursor:pointer; 
    word-spacing:-1px; 
    text-decoration: none; 
    }

当我移动arround页面时，保持链接处于活动状态，直到我选择另一个链接

相关推荐