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完全适用于此。 E.g。

$('.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。

Answer 2

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

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

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

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

2 个答案: