Jquery Tabs - меняйте css в зависимости от конкретной вкладки - PullRequest
Новая
       6

Jquery Tabs - меняйте css в зависимости от конкретной вкладки

0 голосов
/ 01 января 2011

Итак, я работаю на этой странице

http://universidadedoingles.com.br/text-tabs/tabs-text.html

Как вы, ребята, видите, у меня есть четыре вкладки и стрелка внизу, мне нужно, чтобы стрелка пошлапод выбранной вкладкой, если щелкнуть вкладку 3, эта стрелка должна перейти под вкладку 3, просто!но я не знаю!

Вы также можете видеть, что когда страница загружается на вкладке 1 и вы нажимаете на вкладку 2, эффект, который я хочу, работает очень хорошо, вот jquery, который я использую для этого:

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

Вот и все, большое спасибо за любую помощь.pS - я использую Mac, поэтому пока нет IE для тестирования, это хорошо выглядит в Safari и Chrome.

Ответы [ 2 ]

1 голос
/ 01 января 2011

Если вы посмотрите на CSS для tabs1 & 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);
});
0 голосов
/ 01 января 2011

У вас есть несколько вариантов здесь.

Я бы изменил класс CSS, уже используемый JQuery Tabs: .ui-tabs-selected

Или попробуйте какой-нибудь javascript следующим образом:

$(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');
  });
});
...