0

如何更改 CSS 以使主菜单列表项在单击时保持选中状态？我可以在悬停时更改背景颜色，但我真的希望在单击时更改背景颜色，直到我单击其他内容。我的子菜单在点击时显示，而不是悬停，这就是为什么悬停对我不起作用。

例如，在 www.IBM.com 上，主菜单中选定列表项的样式在单击时会发生变化，而不仅仅是在悬停时发生变化。

这是我所拥有的：

<div class="header">
  <ul class="site-nav">
    <li class="first">
       <a href="#">Home</a>
    </li>
    <li>
       <div class="quick-more">
       <a class="drop-link">Support</a>
        <ul class="dropdown" style="display: block;">
       ......etc.
    <li>Community</li>
    <li>Contact</li>
  </ul>
</div>

在我的 CSS 中，我有以下内容：

.site-nav {
  background: #1f78c3;
  }
.site-nav .dropdown {
 background: #fff;
 padding: 0;
 border: 0;
 }
.site-nav li a:hover{
 background: #fff;
 color: #1f78c3;
 }

我也尝试过 a:visited 和 a:target，但它们都没有成功。知道我缺少什么吗？

4

3 回答 3

0

您可以将 .selected 添加到不同页面上的链接并使用 CSS 定位它。

于 2013-10-31T17:46:50.507 回答
0

我将使用的方法是 javascript/jQuery 方法。

与 htmltroll 所说的类似，创建一个类，例如.selected，它具有您希望活动链接具有的所有样式。然后在 javascript 中，添加如下内容：

$(your-links).click(function(){
  if (!$(this).hasClass("selected"))$(this).addClass("selected");
})

类似的东西。

于 2013-10-31T18:00:30.547 回答
0

正如@htmltroll 和@Joel 所说，您需要使用一点JS（在我的例子中是jQuery）来实现这一点，因为CSS 不处理点击事件。

为了使其更加模块化，您可以检查是否有任何 .site-nav li 具有嵌套的 ul，然后相应地应用“活动”类。

// any <li> that is a direct descendant of 'site-nav
var links = $('.site-nav').find('> li');

// bind the click event 
links.on('click', function() {

    var clkd = $(this);

    // if the <li> has a <ul> in it
    if(clkd.has('ul').length) {

        // and if that <li> doesn't have the 'active' class
        if(!clkd.hasClass('active')) {

            // Add the active class to the <li>
            clkd.addClass('active');

        } else {

            // if the dropdown was already open, remove class to close
            clkd.removeClass('active');

        }

    }

})

我拼凑了一个快速小提琴来演示：http: //jsfiddle.net/uXB2T/7/

于 2013-11-01T03:51:17.620 回答