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

【问题标题】：Keep link as active when I move arround page, till I select another link当我在页面上移动时保持链接处于活动状态，直到我选择另一个链接
【发布时间】：2012-04-30 12:47:55
【问题描述】：

我的链接有问题，我创建了一个由链接组成的菜单，同时指示用户他在哪个部分。菜单工作正常，但是当我开始在该链接下的部分上执行操作时（它是伪类活动的，因为它已被选中）然后选择的链接更改为普通链接，因此用户将失去方向。

我认为代码不是必需的，但以防万一有人需要。

.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>

有人可以给我一个提示吗？

【问题讨论】：

标签： html css hyperlink

【解决方案1】：

只需定义另一个类active 和a: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>

上面的例子只在当前页面匹配链接的href时添加class="active"。你可以在 PHP（那个三元运算符）中做类似的事情。但不确定 ASP。

【讨论】：

听起来不错，但我对jquery一无所知，你能举一个更广泛的例子吗？请？为什么我在加载页面时收到脚本错误？如何调用此函数以及何时调用？谢谢。
你基本上需要在$(document).ready()期间加载它。抱歉，我认为这对于网络开发人员来说已经足够明显了。查看 jQuery 主页上的教程以了解有关 jQuery 的更多信息 :)
Darm，谢谢你的帮助，不幸的是，我正在做 xsl 文件，它抱怨 sintax。而且我不能使用 CDDATA 标记，因为它会被浏览器解释为文本。不管怎么说，还是要谢谢你。塞萨尔。
只需使用像&amp; 这样的HTML 实体，而不是& 等等，或者只是一个单独的.js 文件。

【解决方案2】：

当点击它时，使用 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;
    }

【讨论】：