Javascript jquery ui选项卡主要样式更改

我正在使用jQueryUI选项卡，我需要主要更改其样式。我需要删除背景图像，边框，几乎所有的东西。我需要它看起来最小，而不是像它的自我包含

最好的方法是什么？但是，我需要使用日历小部件的默认UI样式，它位于同一页面上。我做了很多研究，每个人似乎都指向主题滚轴。然而，我并不只是想改变颜色和边界半径。我需要删除垃圾。主题辊似乎只是改变颜色之类的东西，对现实世界并不真正有用。如何调整选项卡的css而不更改同一页面上其他UI小部件的样式？我希望日历保持原样

---

甚至值得为我的选项卡使用jquery UI吗？

使用CSS应该非常简单。你的元素上有ID和类，你可以用CSS触摸它们。Themeroller只是一个快速的工具

---

如果我还记得的话，如果这是同一个插件，你也可以调整标签js和添加图像的行，或者干脆按照你的喜好删除该行。

我选择编写自己的简单标签功能，当时我意识到我不需要它的大多数内置功能，例如加载AJAX内容和动态添加/删除选项卡。如果我需要这些特性，那么自己实现它们就很容易了。促使我放弃jQueryUI选项卡的原因是我必须以不同的方式构造DOM元素。我还需要将标签的样式设置为最小，并且我认为从头开始构建比尝试剥离很多标签要省力

我最怀念的特性是jQueryUITabs如何自动选择URL中的所指示的选项卡，我知道我可以复制它——只是还没有找到它

更新：但是，是的，如果您坚持使用它，您可以使用您拥有的任何ID覆盖CSS：

#my-tabs .ui-state-default {
    background-image: none; /* remove default bg image */
}

---

以此类推..

在css中尝试以下操作，假设您的类是.mytabs，用于覆盖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;
    }

---

使用一些CSS很容易，您可以轻松覆盖jQueryUI提供的标准CSS。你可能不需要！如果修改后的CSS出现在jQuery UI CSS之后，则很重要

---

您还可以在jQuery加载时将类删除/添加到每个元素，但这似乎有点不必要

我想知道这是不是真的！重要属性首先应该在默认的jquery ui模板中。例如，如果您将选项卡更改为位于左侧或右侧而不是顶部，则“底部边框”不应该有一个！重要的是，这通常会被覆盖。

您应该查看Keith Wood关于JQuery UI选项卡样式的详细博客文章

你具体问题的答案是什么

我需要删除背景图像，边框，几乎所有的东西。 我需要它看起来很小

在基思·伍德的帖子的这一部分

除此之外，还有10个样式更改，以及实现所需效果所需的CSS

---

这里几乎涵盖了所有内容，但我环顾四周，找到了一种方法，可以在编辑其余属性的同时，用一个类轻松地抛出您确实不需要的东西

*[class*="ui-"] {
     border-radius:0;
     background-image: none;
     .
     .
     .
}

---

通过这种方式，您可以选择每个以ui开头的类，并从jQuery ui中删除任何您想删除的内容。

无法回答问题的最后一部分。这是你必须自己决定的事情。剩下的很简单。只需调整CSS。如何在不更改日历样式的情况下调整选项卡的CSS？这似乎是一个不错的方法。有没有一种方法可以防止jquery向小部件添加类，这样我就可以从头开始编写样式？在编写代码时提供某种解释总是很有帮助的。

 #my-tabs * {
    background-image: transparent;
}