Question

如何更改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：目标，但这些都没有成功。知道我错过了什么吗？

Answer 1

您可以将.selected添加到不同网页上的链接，并使用CSS进行定位。

Answer 2

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

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

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

这些方面的东西。

Answer 3

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

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

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

在子菜单打开时保持选择导航列表项

3 个答案: