隐藏/显示元素点击并更改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]样式标签作为单选按钮