Question

所以，我正在这个页面上工作

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");
            });
    });

就是这样，非常感谢你提供任何帮助。 p.S - 我正在使用Mac，所以还没有用于测试的IE，这在Safari和Chrome中看起来很不错。

Answer 1

如果你看一下CSS的tab1＆amp; 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

你有几个选择。

我将改变JQuery选项卡已经使用的CSS类：.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');
  });
});

Jquery选项卡 - 根据特定选项卡更改css

2 个答案: