0

我有这个导航栏，我希望当点击一个锚点时，它会使用 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

4

3 回答 3

2

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

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 的“活动”属性是单击时调用的属性。

于 2013-03-10T10:43:43.557 回答
1

听起来 :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;
}
于 2013-03-12T20:19:33.337 回答
0

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

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

对于第二个问题，给classnameul likemyul

<ul class="myul">


.myul li {
 background-color:red;
}
.myul li.selected {
 background-color:blue;
}
于 2013-03-10T10:49:43.483 回答