html - 当我在页面中移动时保持链接处于事件状态，直到我选择另一个链接

Question

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

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

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

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

Answer 1

只需定义另一个类 active 和 a:active 并将该类动态添加到有问题的链接中(并从菜单中的任何其他链接中删除相同的类).

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

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

更新:或者如果这些链接实际上是同步的并且您实际上使用的是服务器端 View 技术(如 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。