0

私はこの 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 だけを使用してこれが可能かどうかを知りたい

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 の「Active」属性は、クリック時に呼び出される属性です。

于 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;
}

2 番目の問題については、classnameul のようにmyul

<ul class="myul">


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