1. 首頁
  2. 問答
  3. 是否有一種CSS方式可以讓菜單上的class =「active」切換？

是否有一種CSS方式可以讓菜單上的class =「active」切換？

2013-06-04 49 views

回答

1

您將需要編輯html，但css doens沒有能力更改元素類。你可以寫一個小函數讓js在點擊事件中執行此操作，並從舊菜單項中刪除該類並將其添加到新選擇的菜單項中。

這樣的： http://plnkr.co/edit/6B5v2KrZonuI33dJySS6?p=preview

來源

2013-06-04 23:05:17 Barrett

+0

+1 for javascript解決方案 – showdev

0

不使用CSS完全。行爲特徵，如鏈接和DOM的修改超出了CSS的範圍。

但是，您可以構建鏈接來修改URL的查詢字符串（例如？item = one），並使用生成的GET值在導航上設置類。

或使用javascript。

來源

2013-06-04 23:09:32 showdev

1

您可以用CSS單獨突出顯示每個鏈接，但不能使用類。相反，使用:target僞類：http://codepen.io/pageaffairs/pen/kqoma

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 

ul, li, div {margin: 0; padding: 0;} 
ul { 
    list-style: none; 
    overflow: hidden; 
    padding: 10px; 
} 

li { 
    float: left; 
    margin: 0 20px 0 0; 
} 

li a { 
    display: block; 
    padding: 10px 20px; 
    text-decoration: none; 
    color: #08c; 
    border-radius: 20px; 
} 

li a:hover, li a:target { 
    background: #08c; 
    color: white; 
} 

</style> 

</head> 

<body> 

<h1>Hello <code>:target</code>!</h1> 

<div class="header"> 
    <ul class="nav nav-pills"> 
     <li class="active"> 
      <a href="#home" id="home">Home</a> 
     </li> 
     <li> 
      <a href="#one" id="one">One</a> 
     </li> 
     <li> 
      <a href="#two" id="two">Two</a> 
     </li> 
    </ul> 
</div> 

</body> 
</html>

來源

2013-06-04 23:29:00

+0

聽起來像一個很好的方法，通常你會把'link a'的文本顏色設置爲'＃08c'，當某人懸停或點擊'link a'時，你設置''link'的顏色'一個'''白色'和'鏈接a'到'＃08c'的背景顏色？對？ – daydreamer

+0

是的，雖然經過反思，但我不確定這樣的設置會有多麼有用。再一次，你需要什麼？ –

+0

想象一下，當用戶點擊「交易」時，一個新的視圖出現3個鏈接「當前」，「近期」和「其他」。這個想法是，當第一次點擊'當前'應選擇，然後進一步的用戶交互可能會選擇其他鏈接。希望能給出一些背景 – daydreamer

1

你可以因此這與jQuery，以下格式：

 switch (window.location.pathname) { 
      case '/THE_URL_HERE': 
       $('.nav-home').addClass('active'); 
       break; 
      case '//THE_URL_HERE': 
       $('.nav-one').addClass('active'); 
       break; 
      case '//THE_URL_HERE': 
       $('.nav-two').addClass('active'); 
       break; 
     }

並添加類到您的HTML：

<h1>Hello Plunker!</h1> 
    <div class="header"> 
     <ul class="nav nav-pills"> 
     <li class="nav-home"> 
      <a href="#">Home</a> 
     </li> 
     <li class="nav-one"><a href="#">One</a></li> 
     <li class="nav-two"><a href="#">Two</a></li> 
     </ul> 
    </div>

來源

2013-06-05 02:05:24 Xarcell

+0

+1好手法.. –

相關問題

 相關問題