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

发布于 2024-10-10 02:44:23 字数 604 浏览 5 评论 0原文

所以，我正在这个页面

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 中看起来不错。

原文

So, I am working in this page

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

As you guys can see, I have four tabs and an arrow right below, I need to do that the arrow go below the selected tab, if a click on tab 3, that arrow should go below tab 3, simple as that! but I don`t know!

You also can see that when the page loads on tab 1 and you click on tab 2 the effect I want works pretty well, here`s the jquery I am using for that:

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

That`s it, thank you vey much for any kind of help.
p.S - i am using a mac, so theres no IE for testing yet, this looks good in Safari and Chrome.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

青朷 2024-10-17 02:44:23

如果您查看 tabs1 和 tabs1 的 CSS 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);
});

If you look at the CSS for tabs1 & tabs2 the only difference is the left margin. So You can just adjust the left margin property:

Current 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;*/
}

Changing the left margin based on the tab selected:

$('#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 原文

何处潇湘 2024-10-17 02:44:23

您在这里有几个选择。

我会改变 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');
  });
});

You have a couple of options here.

I'd alter the CSS class already used by the JQuery Tabs: .ui-tabs-selected

Or try some javascript like this:

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

回复收藏 0 原文

~没有更多了~