Javascript jquery ui tabs 主要风格变化
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2459223/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery ui tabs major style change
提问by Jonah
I am using jquery UI tabs and I need to majorly change the styling on it. I need to rempve the background image, the borders, almost everything. I need it to look minimal, and not like it's self contained.
我正在使用 jquery UI 选项卡，我需要对它的样式进行重大更改。我需要重新设置背景图像、边框，以及几乎所有内容。我需要它看起来很小，而不是像它是独立的。
What's the best way to do this? I need to use the default UI styling for the calendar widget however, which is on the same page. I've done a lot of research and everyone seems to point to the theme-roller. However, i do not just want to change the colors and border radii. I need to delete crap. theme-roller seems to be just change things like colors (not really useful for the real world). How do I adapt the css for the tabs without changing the styles of the other UI widgets on the same page (I want the calendar to stay as it is)?
做到这一点的最佳方法是什么？但是，我需要使用日历小部件的默认 UI 样式，它位于同一页面上。我做了很多研究，每个人似乎都指向主题滚轮。但是，我不只是想更改颜色和边框半径。我需要删除废话。theme-roller 似乎只是改变颜色之类的东西（对现实世界没有用）。如何在不更改同一页面上其他 UI 小部件的样式的情况下调整选项卡的 css（我希望日历保持原样）？
Is it even worth using jquery UI for my tabs?
是否值得为我的标签使用 jquery UI？
采纳答案by Shiva
You should check out Keith Wood's detailed blog post on styling JQuery UI Tabs.
您应该查看 Keith Wood 关于样式化 JQuery UI 选项卡的详细博客文章。
The answer to your specific question
您的具体问题的答案
I need to rempve the background image, the borders, almost everything. I need it to look minimal
我需要重新设置背景图像、边框，以及几乎所有内容。我需要它看起来最小
is in this section "Remove most of the formatting" of Keith Wood's post.
在本节“删除大部分格式”中 Keith Wood 的帖子。
In addition to this, there are 10 more style changes, complete with the CSS required to achieve the desired effect.
除此之外，还有 10 处样式更改，以及实现所需效果所需的 CSS。
回答by Nikki Erwin Ramirez
I chose to write my own simple tabs functionality when, I realized that I didn't need most of its built-in features, such as loading AJAX content and dynamic adding/removing of tabs. If I needed those features, it would be easy to implement them myself. What pushed me to ditch jQuery UI Tabs is that I had to structure my DOM elements differently. I also needed to style my tabs to look minimal, and I thought that building from scratch would be less effort than trying to strip away a lot.
当我意识到我不需要它的大部分内置功能时，我选择编写自己的简单选项卡功能，例如加载 AJAX 内容和动态添加/删除选项卡。如果我需要这些功能，自己实现它们会很容易。促使我放弃 jQuery UI Tabs 的是我必须以不同的方式构建我的 DOM 元素。我还需要将我的标签样式设置为看起来最小，并且我认为从头开始构建会比尝试剥离很多东西更省力。
The feature I miss the most is how jQuery UI Tabs automatically selects the tab indicated by the # in the URL (I know I can just copy it -- just haven't gotten to it yet).
我最想念的功能是 jQuery UI Tabs 如何自动选择 URL 中 # 指示的选项卡（我知道我可以复制它——只是还没有得到它）。
UPDATE: But, yeah, if you're sticking with it, you can override the CSS using any IDs you have:
更新：但是，是的，如果您坚持使用它，您可以使用您拥有的任何 ID 覆盖 CSS：
#my-tabs .ui-state-default {
background-image: none; /* remove default bg image */
}
and so on..
等等..
回答by kiev
Try the following in your css assuming your class is .mytabs for the overriding css. It should get you started on
假设您的类是 .mytabs 用于覆盖 css，请在您的 css 中尝试以下内容。它应该让你开始
.mytabs li {
background : white !important;
border-top: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
}
.mytabs li.ui-state-active {
background : white !important;
border-top: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
margin: 0;
}
.mytabs li a
{
color: Black !important;
font-size: 1.4em !important;
font-weight: bolder;
padding: 4px 1.5ex 3px !important;
}
回答by Carmelo Santana
It's easy with some CSS you can easily override the standard CSS delivered with jQuery UI. You may not need !important if your modified CSS appears after the jQuery UI CSS.
使用一些 CSS 很容易，您可以轻松覆盖 jQuery UI 提供的标准 CSS。如果您修改的 CSS 出现在 jQuery UI CSS 之后，您可能不需要 !important。
You can also remove/add classes to each element with jQuery on load, but that seems a bit unnecessary.
您还可以在加载时使用 jQuery 为每个元素删除/添加类，但这似乎有点不必要。
回答by user339047
I wonder if the !important attributes should be in the default jquery ui templates in the first place. For example, if you change the tabs to be on the left or right side instead of top, the 'border-bottom' shouldn't have a !important, since this is commonly overwritten.
我想知道 !important 属性是否应该首先出现在默认的 jquery ui 模板中。例如，如果您将选项卡更改为左侧或右侧而不是顶部，则 'border-bottom' 不应有 !important，因为这通常会被覆盖。
回答by Fernando Silva
Almost everything is covered here, but I was looking around and found a way to toss things you really don't need quite easily with a single class, while then editing the remaining attributes.
这里几乎涵盖了所有内容，但我环顾四周并找到了一种方法，可以使用单个类轻松地扔掉您真正不需要的东西，同时编辑剩余的属性。
*[class*="ui-"] {
border-radius:0;
background-image: none;
.
.
.
}
This way you select every class that starts with "ui-" and remove whatever you want to remove from jQuery UI.
通过这种方式，您可以选择每个以“ui-”开头的类，并删除您想从 jQuery UI 中删除的任何内容。
回答by Bellash
#my-tabs * {
background-image: transparent;
}
回答by Kevin
It should be fairly straightforward with CSS. Your elements have IDs and classes on them and you can touch them with CSS. Themeroller is just a quick go-to thing.
使用 CSS 应该相当简单。你的元素上有 ID 和类，你可以用 CSS 触摸它们。Themeroller 只是一个快速的选择。
If I recall, you could also adjust the tabs js and adjust the lines that add images (if this is the same plugin) or just remove that line altogether to your liking.
如果我记得，您还可以调整选项卡 js 并调整添加图像的行（如果这是同一个插件），或者根据自己的喜好完全删除该行。
