jQueryのタブ -

Question

だから、特定のタブに応じて変更するCSSは、私が

あなたたちが見ることができるように、私は4つのタブと、右下の矢印を持ってhttp://universidadedoingles.com.br/text-tabs/tabs-text.html

は、私が行う必要があり、このページで働いています矢印が選択されたタブの下に移動する、タブ3をクリックすると、その矢印はタブ3の下に移動する必要があります。しかし私は知らない！

ます。また、ページタブ1の負荷と、あなたは、タブ2の上に、私はかなりよく作品をしたい効果をクリックしたときに、私はそれのために使用していますjqueryのをhere`sことがわかります。

 $(document).ready(function() { 
      $("a.tab2").click(function() { 
       $(".arrow-spacer").addClass("tabs2"); 
      }); 
    }); 

That`それは、どんな種類の助けをしても大変ありがとう。 p.S - 私はmacを使用していますので、まだテスト用IEはありません。これはSafariとChromeでよく見えます。

Answer 1

を& tabs2唯一の違いは左余白です。だから、あなただけの左余白のプロパティを調整することができます。

現在のCSSを：

.tabs1 { 
    background-image: url('up-arrow.png'); !important 
    background-repeat: no-repeat; 
    width:35px; 
    height: 17px; 
    margin: -16px 0px 0px 10px; 
} 

.tabs2 { 
    background-image: url('up-arrow.png'); !important 
    background-repeat: no-repeat; 
    width:35px; 
    height: 17px; 
    margin: -16px 0px 0px 90px; 
    /*position: absolute;*/ 
/* border: 2px solid green;*/ 
} 

選択したタブに基づいて左余白を変更する：

$('#tabs').bind('tabsselect', function(event, ui) { 
    var leftMargin = "16px"; 
    switch(ui.index) 
    { 
     case 0: 
     leftMargin = "16px"; 
     break; 
     case 1: 
     leftMargin = "90px"; 
     break; 
     case 2: 
     leftMargin = "164px"; 
     break; 
     case 3: 
     leftMargin = "238px"; 
     break; 
    } 
$(".arrow-spacer").css("margin-left",leftMargin); 
}); 

Answer 2

ここには2つのオプションがあります。

私はすでにjQueryのタブで使用されるCSSクラスを変更したい：.ui-タブが選択

するか、このようないくつかのjavascript試してください：あなたはTABS1のためにCSSを見れば

$(document).ready(function() { 
    $('#tabs ul li a').click(function() { 
    // remove class 'tabs2' if its been set at all. 
    $('#tabs ul li a').removeClass('tabs2'); 
    // add class 'tabs2' to the clicked element. 
    $(this).addClass('tabs2'); 
    }); 
});