JQuery UI 选项卡选择的背景不改变 javascript

发布于 2024-12-21 14:54:59 字数 692 浏览 5 评论 0原文

我正在使用这样的 JQuery UI 选项卡：

http://kyleschaeffer.com/web -controls/simple-jquery-tabs-template/

我遇到的问题是我有多个选项卡。我有一张有几行的桌子，背景颜色为白色/橙色交替。我希望所选选项卡的颜色与背景颜色相同，这样如果偶数行是橙色，我希望所选选项卡为橙色，但如果它是白色，我希望选项卡为白色。

我使用的CSS是：

.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
padding: 10px 20px 12px 20px;
background: #fff;
border-bottom-style: none;
  }

.ui-tabs .ui-tabs-nav li.ui-tabs-selected-orange a {
padding: 10px 20px 12px 20px;
background: #ff9900;
border-bottom-style: none;
}

当前每个选定的选项卡都显示为橙色。如何使用 JQuery 或 JavaScript 来了解背景何时为偶数/奇数并相应地更改所选选项卡颜色？

原文

I am using JQuery UI tabs like this:

http://kyleschaeffer.com/web-controls/simple-jquery-tabs-template/

The problem I'm having is that I have more than one set of tabs. I have a table with several rows and alternating background color white/orange. I want the selected tab to be the same color as the background so that if the even row is orange I want the selected tab to be orange but if it is white I want the tab to be white.

The css I am using is:

.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
padding: 10px 20px 12px 20px;
background: #fff;
border-bottom-style: none;
  }

.ui-tabs .ui-tabs-nav li.ui-tabs-selected-orange a {
padding: 10px 20px 12px 20px;
background: #ff9900;
border-bottom-style: none;
}

Currently every selected tab is showing up as orange. How can I use JQuery or JavaScript to know when the background is even/odd and change the selected tab color accordingly?

分享到QQ

分享到微博

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

发布评论

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

百思不得你姐 2024-12-28 14:54:59

因为你的 css 的其余部分是未知的，我正在询问，它可能会使所选选项卡透明：

.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
    padding: 10px 20px 12px 20px;
    background: transparent;
    border-bottom-style: none;
}

或者，我询问你是否知道表行是奇数/偶数并将 css-classes 设置为该行，如，然后尝试：

.odd .ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
background: #yourOddColor;
}

.even .ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
background: #yourEvenColor;
}

Cause the rest of your css is unknown I'm quessing, it may work to make the selected tab transparent:

.ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
    padding: 10px 20px 12px 20px;
    background: transparent;
    border-bottom-style: none;
}

OR, I quess you know if the table row is odd/even and sets css-classes to the row, like <tr class="odd">, then try:

.odd .ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
background: #yourOddColor;
}

.even .ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
background: #yourEvenColor;
}

回复收藏 0 原文

~没有更多了~