如何显示用户在网页中选择菜单栏的哪个选项

Question

我在网页中有一个HTML菜单栏，并且网页中的所有页面都有它。当我在此菜单栏中选择一个选项时，我希望用户在浏览整个网页时识别用户选择了哪个选项（或用户处于哪个页面）。这可以通过改变该特定选项的颜色来识别。菜单栏的代码写在下面，

<style> 
/* Stylesheet */ 
#cssmenu > ul{ 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    vertical-align: baseline; 
    line-height: 1; 
} 

/* The container */ 
#cssmenu > ul { 
    display: block; 
    position: relative; 
    width: 150px; 
} 

    /* The list elements which contain the links */ 
    #cssmenu > ul li { 
     display: block; 
     position: relative; 
     margin: 0; 
     padding: 0; 
     width: 150px; 
    } 

     /* General link styling */ 
     #cssmenu > ul li a { 
      /* Layout */ 
      display: block; 
      position: relative; 
      margin: 0; 
      border-top: 1px dotted #fff; 
      border-bottom: 1px dotted #d9d9d9; 
      padding: 11px 20px; 
      width: 110px; 

      /* Typography */ 
      font-family: Helvetica, Arial, sans-serif; 
      color: #3dafea; 
      text-decoration: none; 
      text-transform: uppercase; 
      text-shadow: 0 1px 0 #fff; 
      font-size: 13px; 
      font-weight: 300; 

      /* Background & effects */ 
      background: #eaeaea; 
     } 

     /* Rounded corners for the first link of the menu/submenus */ 
     #cssmenu > ul li:first-child>a { 
      border-top-left-radius: 4px; 
      border-top-right-radius: 4px; 
      border-top: 0; 
     } 

     /* Rounded corners for the last link of the menu/submenus */ 
     #cssmenu > ul li:last-child>a { 
      border-bottom-left-radius: 4px; 
      border-bottom-right-radius: 4px; 
      border-bottom: 0; 
     } 


     /* The hover state of the menu/submenu links */ 
     #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a { 
      color: #fff; 
      text-shadow: 0 1px 0 rgba(0, 0, 0, .3); 
      background: #54cdf1; 
      background: -webkit-linear-gradient(bottom, #54cdf1, #74d7f3); 
      background: -ms-linear-gradient(bottom, #54cdf1, #74d7f3); 
      background: -moz-linear-gradient(bottom, #54cdf1, #74d7f3); 
      background: -o-linear-gradient(bottom, #54cdf1, #74d7f3); 
      border-color: transparent; 
     } 

     /* The arrow indicating a submenu */ 
     #cssmenu > ul .has-sub>a::after { 
      content: ''; 
      position: absolute; 
      top: 16px; 
      right: 10px; 
      width: 0px; 
      height: 0px; 

      /* Creating the arrow using borders */ 
      border: 4px solid transparent; 
      border-left: 4px solid #3dafea; 
     } 

     /* The same arrow, but with a darker color, to create the shadow effect */ 
     #cssmenu > ul .has-sub>a::before { 
      content: ''; 
      position: absolute; 
      top: 17px; 
      right: 10px; 
      width: 0px; 
      height: 0px; 

      /* Creating the arrow using borders */ 
      border: 4px solid transparent; 
      border-left: 4px solid #fff; 
     } 

     /* Changing the color of the arrow on hover */ 
     #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after { 
      border-left: 4px solid #fff; 
     } 

     #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before { 
      border-left: 4px solid rgba(0, 0, 0, .25); 
     } 


     /* THE SUBMENUS */ 
     #cssmenu > ul ul { 
      position: absolute; 
      left: 150px; 
      top: -9999px; 
      padding-left: 5px; 
      opacity: 0; 
      /* The fade effect, created using an opacity transition */ 
      -webkit-transition: opacity .3s ease-in; 
      -moz-transition: opacity .3s ease-in; 
      -o-transition: opacity .3s ease-in; 
      -ms-transition: opacity .3s ease-in; 
     } 

     /* Showing the submenu when the user is hovering the parent link */ 
     #cssmenu > ul li:hover>ul { 
      top: 0px; 
      opacity: 1; 
     } 
</style> 
<div id='cssmenu'> 
<ul> 
<li><a href='#'><span>Home</span></a></li> 
<li><a href='#'><span>Products</span></a></li> 
<li><a href='#'><span>Menu 1</span></a></li> 
<li><a href='#'><span>Menu 2</span></a></li> 
<li><a href='#'><span>About</span></a></li> 
<li><a href='#'><span>Contact</span></a></li> 
</ul> 
</div> 

有人知道该怎么做吗？ 谢谢。

Answer 1

您无法使用CSS检测点击，您需要使用一些JavaScript。以下是您的代码，并添加了一些用于显示所选内容的附加内容。

jsFiddle

的JavaScript

var menuItems = document.querySelectorAll('#cssmenu li'); 
for (var i = 0; i < menuItems.length; i++) { 
    (function (i) { 
     menuItems[i].onclick = function() { 
      clearSelection(); 
      this.className = 'clicked'; 
     } 
    })(i); 
} 

function clearSelection() { 
    for (var i = 0; i < menuItems.length; i++) { 
     menuItems[i].className = ''; 
    } 
} 

CSS

#cssmenu > ul li.clicked a { 
    background:#F00; 
}