簡體   English   中英

使用jquery切換時如何更改活動切換錨點的樣式?

[英]How to change style of active toggled anchor when using jquery toggle?

我正在使用以下內容在頁面上切換具有相關數據的多個鏈接

<div class="buttons">
    <a  class="show" target="1">Option 1</a>
    <a  class="show" target="2">Option 2</a>
    <a  class="show" target="3">Option 3</a>
    <a  class="show" target="4">Option 4</a>
</div>

<div id="div1" class="targetDiv">Lorum Ipsum 1</div>
<div id="div2" class="targetDiv">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv">Lorum Ipsum 4</div>

JS:

$('.targetDiv').hide();
$('.show').click(function () {
    $('#div' + $(this).attr('target')).toggle('').siblings('.targetDiv').hide('');
});

哪個適合我想要的,但我想知道的是,如果鏈接的樣式在每個活動時都可以改變。 因此用戶知道他們正在查看該鏈接的內容。 因此,如果當前節目類是背景:#000; 例如,我可以將其更改為背景:#fff; 不知何故,當顯示該選項DIV時? 什么時候不恢復正常呢?

當前設置的JSfiddle http://jsfiddle.net/W3HtS/1/

在單擊功能上添加活動類名稱

$('.show').removeClass('active');
      $(this).addClass('active');

DEMO

試試這種方式: 工作小提琴

 $('.show').not(this).removeClass('active');
      if($(this).hasClass('active')){
         $(this).removeClass('active');
      }else{
         $(this).addClass('active');
      }
   });

嘗試這個

 $('.targetDiv').hide();

   $('.show').click(function () {
            $(".show").removeClass("highlight");
        $(this).addClass("highlight");
        $('#div' + $(this).attr('target')).toggle('').siblings('.targetDiv').hide('');
        });

定義要在突出顯示類中應用的樣式

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM