隱藏/顯示元素點擊並更改CSS

Question

我試圖建立一個頁面，我有一些鏈接，當點擊它們時，它會在同一頁面上顯示一個文本。我已經用javascript/jQuery完成了，它工作正常。

我試圖做的工作是改變活動鏈接的佈局。我看着在關於這個問題前面的問題了幾個小時，但我爲我在JavaScript的新有點失落/ jQuery的

這裏是一個FIDDLE。你會看到我所做的。我需要關於活動鏈接佈局的幫助。例如，我想，要得到另一種顏色的鏈接的文本，所以我們會知道哪些環節是活動）

這裏是我的html代碼：

<div id="fond_soins"> 
    <a class"asoins" href="javascript:showonlyone('onglet1');" > 
     <span class="icon"> 
      <div id="acu1"> 
       <h3 class="onglet">Titre 1</h3> 
      </div> 
    </a> 
    <a class"asoins" href="javascript:showonlyone('onglet2');" > 
     <span class="icon">  
      <div id="acu2"> 
       <h3 class="onglet">Titre 2</h3> 
      </div> 
    </a> 
    <a class"asoins" href="javascript:showonlyone('onglet3');" > 
     <span class="icon"> 
      <div id="acu3"> 
       <h3 class="onglet">Titre 3</h3> 
      </div> 
     </a> 
</div> 

<div class="clear"></div> 

<div id="contenu_soins"> 
    <div class="newboxes" id="onglet1"> 
     <div class="rectangle"></div> 
      <h2 class="titre_bloc">Titre1</h2> 
      <div class="clear"></div> 
      <div class="contenu-texte"> 
       <div class="contenu-texte"><p>bloc 1</p></div> </div> 
      </div> 
      <div class="newboxes" id="onglet2"> 
       <div class="rectangle"></div> 
        <h2 class="titre_bloc">Titre2</h2> 
        <div class="clear"></div> 
        <div class="contenu-texte"><p>bloc 2</p></div> 
       </div> 
       <div class="newboxes" id="onglet3"> 
        <div class="rectangle"></div> 
         <h2 class="titre_bloc">Titre3</h2> 
         <div class="clear"></div> 
         <div class="contenu-texte"><p>bloc 3</p></div> 
        </div> 
       </div> 

這裏是CSS ：

#fond_soins { 
    height:280px; 
    background-color:#FFF; 
    width:100%; 
} 
#contenu_soins { 
    background-color:#FFF; 
    margin-top:30px; 
    min-height: 242px; 
    padding-top: 11px;  
} 
.newboxes { 
    padding-left:30px; 
    padding-right:30px; 
    padding-bottom:30px; 
} 
a.asoins, a.asoins:hover { 
    text-decoration: none; 
} 
#acu1 { 
    margin-left: 6em; 
} 

#acu1, #acu2, #acu3 { 
    width:15%; 
    height:165px; 
    border-radius: 15px; 
    border-style:solid; 
    border-color: #E5EAD9; 
    border-width:5px; 
    color:#777; 
    float:left; 
    margin-right:1em; 
    margin-top:69px; 
} 
#acu1:hover,#acu2:hover,#acu3:hover { 
    border-color:#333; 
    color:#333; 
    text-decoration:none; 
} 

h3.onglet { 
    text-align:center; 
    padding-top:135px; 
} 

#onglet1 { 
    display:block; 
} 
#onglet2, #onglet3 { 
    display:none; 
} 

#acu1.active, #acu2.active, #acu3.active { 
    border-color:#333; 
    color:#333; 
    text-decoration:none; 
} 

這裏是JavaScript

function showonlyone(thechosenone) { 
    $('.newboxes').each(function(index) { 
     if ($(this).attr("id") == thechosenone) { 
      $(this).show();  
     } 
     else { 
      $(this).hide(); 
     } 
    }); 
}; 

Answer 1

試試這個：

$(function(){ 
    var links = $('.asoins'); 

    links.click(function(){ 
     $(this).toggleClass('activelink', true); 
     links.not(this).toggleClass('activelink', false); 
    }); 
}); 

CSS：

#acu1:hover,#acu2:hover,#acu3:hover, #fond_soins .activelink div { 
    border-color:#333; 
    color:#333; 
    text-decoration:none; 
} 

DEMO：http://jsfiddle.net/yJYTT/119/

Answer 2

創建一個新的CSS類名「主動」爲

.active #acu1,.active #acu2,.active #acu3 
    { 
     text-decoration: underline; 
     border-radius: 15px; 
     border-style: solid; 
     border-color: Black; 
     border-width: 5px; 
    } 

現在，在您的JavaScript函數小幅盤整，通過發送this操作員 用於例如增加一個參數：<a class"asoins" href="javascript:void(0);" onclick="javascript:showonlyone('onglet3',this);" ></a> ，並做一些改變js的功能

function showonlyone(thechosenone,CurrCtrl) { 

    $(".asoins").removeClass("active"); 
    $(CurrCtrl).addClass("active"); 

    $('.newboxes').each(function(index) { 
      if ($(this).attr("id") == thechosenone) { 
       $(this).show();  
      } 
      else { 
       $(this).hide(); 
      } 

    }); 

}; 

Answer 3

我喜歡純CSS解決方案，所以我做了這個給你：

http://jsfiddle.net/vucMe/

它採用#a:checked ~ label[for=a]樣式標籤作爲單選按鈕