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

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

正如你们所看到的，我有四个标签，下面有一个箭头，我需要做的是箭头在所选标签下面，如果点击标签3，箭头应该在标签3下面，就这么简单！但我不知道

您还可以看到，当页面加载到选项卡1并单击选项卡2时，我想要的效果非常好，下面是我使用的jquery：

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

就这样，非常感谢你的帮助。

---

p、 S-我使用的是mac电脑，因此目前还没有用于测试的IE，这在Safari和Chrome中看起来不错。

您在这里有几个选项

我将更改JQuery选项卡已经使用的CSS类：。已选择ui选项卡

或者尝试以下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');
  });
});

---

如果您查看tabs1和tabs2的CSS，唯一的区别是左边距。因此，您可以只调整“左边距”属性：

当前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);
});

---

布伦丹，我对你是多么的伟大，这是无法用语言来形容的，兄弟！这就是我追求的结果！万分感谢！卢克，你的回答返回了一些奇怪的结果，但下一个答案是去做！谢谢你的回答！Jeff，我没有看到箭头实际上是如何添加到页面的：/-我希望解决方案只是添加/删除类，而不是随意更改页边距。。。如果您的字体发生更改，是否需要更改？