Question

我有这个Navbar和我，我希望当点击一个锚时，它会使用CSS加下划线：

<div id="nav"> 
            <a data-field="home" class="nav-menu">Homepage</a> <span>|</span>
            <a data-field="about" class="nav-menu">About us</a> <span>|</span>
            <a data-field="support" class="nav-menu">Support</a> <span>|</span>
            <a data-field="contact" class="nav-menu">Contact</a>        
</div>

另外，我如何用列表做同样的事情：

<ul>
    <li><a data-field="home" id="homelink" class="tray-menu" id="tray-active" >Homepage</a></li>
    <li><a data-field="news" id="newslink" class="tray-menu">News</a></li> 
    <li><a data-field="products" id="productslink" class="tray-menu">Products</a></li>
    <li><a data-field="sales" id="saleslink" class="tray-menu">General Sales T&C</a></li>
    <li><a data-field="job" id="jobslink" class="tray-menu">Job Opportunities</a></li>
</ul>

在这种情况下，这种情况下如何使<li>元素获得特定的“选定”css样式，而其中的<li>变为灰色或其他什么？

在Javascript中它很简单，只需操作DOM并设置id或class标记。

更新

基本上，我有这个工作，但使用Java（GWT）;但是我想知道是否可以使用纯CSS和HTML

Answer 1

如果您想在整个页面上使用此效果：

a:link 
{
text-decoration:none;
color:#000;
}
a:visited 
{
text-decoration:none;
color:#000;
}
a:hover 
{
text-decoration:none;
color:#008F68;
}
a:active 
{
text-decoration:underline;
color:#000;
}

或者只是导航使用同样的东西，但把'li'放在一切的前面。

CSS的“活动”属性是点击时调用的属性。

Answer 2

听起来像：target伪选择器可能会起作用。（*参见http://css-tricks.com/on-target/）（在IE的旧版本中不起作用）

<强> HTML

<ul>
  <li id="homelink"><a href="#homelink" data-field="home" class="tray-menu" id="tray-active">Homepage</a>  </li>
  <li id="newslink"><a href="#newslink" data-field="news" class="tray-menu">News</a></li> 
  <li id="productslink"><a href="#productslink" data-field="products" class="tray-menu">Products</a></li>
  <li id="saleslink"><a href="#saleslink" data-field="sales" class="tray-menu" href="#saleslink">General Sales T&C</a></li>
  <li id="jobslink"><a href="#jobslink" data-field="job" class="tray-menu">Job Opportunities</a></li>
</ul>

<强> CSS

:target {
text-decoration: underline;
color: red;
}

Answer 3

表示“a”链接（以下行适用于页面中的所有链接）

a:active 
{
text-decoration:underline;
color:red;
}

对于第二个问题，

将classname提供给myul

的ul

<ul class="myul">


.myul li {
 background-color:red;
}
.myul li.selected {
 background-color:blue;
}

Navbar的CSS样式

3 个答案: