我想完全自定义jQuery UI标签而不破坏jQuery UI日期选择器的样式？这是可行的还是应该进行自定义工作而不使用jQuery UI选项卡？
答案 0 :(得分：4)
$("#mytabs").tabs()
<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="mytabs">
<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li>
<li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li>
<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1">
<p>Tab one content goes here.</p>
</div>
...
</div>
此示例显示了可能应用的大多数ui类。 你可以为他们的孩子重置它们。 #mytab only ..
#mytab.ui-tabs {
/* reset or overwrite everything you don't like */
}
#mytab li.ui-tabs-selected {
/* reset or overwrite everything you don't like */
}
...
这不太舒服，但允许你仍然在任何其他元素中使用jquery ui样式。
关于datepicker，只要你确保上面定义的样式没有用在包含你应该没有的内容的div中，大多数类的前缀是“.ui-datepicker-”或“.ui-标签 - “无论如何所以他们不应该干涉..
答案 1 :(得分：2)
在应用tabs小部件后，只需使用jQuery链接从tab容器元素中删除ui-widget类。大多数不受欢迎的样式都附加到ui-widget类。
$("#tabs").tabs().removeClass('ui-widget');
在具有更多样式内容的不同情况下，我发现删除更多类是必要的，不仅仅是从容器div，而是从其中的所有元素。
$("#tabs").tabs();
$("#tabs, #tabs *")
.removeClass('ui-widget ui-widget-content ui-widget-header ui-tabs-panel');
答案 2 :(得分：1)
这是可能的，但我认为编写自己的标签更容易。看看这个链接： jquery ui tabs major style change
答案 3 :(得分：1)
也许这种微小侵入性的CSS骨架有帮助。观察到只有JQuery UI定义的ui-tabs类（及其后代ul＆gt; li）被设置样式，这避免了触及theme-roller-generated jquery-ui-1.8.18x.custom.css中包含的其他ui相关类（I仅通过研究该文件从未得到过这个想法。）
/* default tab state */
/* tabs nav bar */
.ui-tabs ul {
border-top: 0 !important;
...
}
.ui-tabs li {
background : #EFEFE7 !important;
...
}
.ui-tabs li a {
color: Black !important;
padding: 4px 1.5ex 3px !important;
}
/* selected tab state */
.ui-tabs li.ui-state-active {
margin: 0;
...
}
.ui-tabs li.ui-state-active a {
...
}
/* hovered tab state */
.ui-tabs li.ui-state-hover {
...
}
.ui-tabs li.ui-state-hover a {
...
}
答案 4 :(得分：1)
偶然发现了类似的问题。下面列出的解决方案和演示。
我要感谢以下来源为我提供了CSS代码的好例子 - http://keith-wood.name/uitabs.html
另外，我要感谢jquery团队及其示例代码 - http://jqueryui.com/tabs/
<强> HTML
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
<强> CSS
#tabs {
background: transparent;
border: none;
}
#tabs .ui-widget-header {
background: transparent;
border: none;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
#tabs .ui-tabs-panel {
display: none;
background: transparent;
border-width: 0px;
background: none;
}
#tabs .ui-tabs-nav .ui-state-default {
background: transparent;
border: none;
}
#tabs .ui-tabs-nav .ui-state-active {
background: transparent no-repeat bottom center;
border: none;
}
#tabs .ui-tabs-nav .ui-state-default a {
color: #c0c0c0;
}
#tabs .ui-tabs-nav .ui-state-active a {
color: #459e00;
}
<强> JS
// Setting Tabs - Demonstrating how to set currently selected tab
$("#tabs").tabs({active: 1});
$("#tabs").removeClass('ui-widget');
// Demonstrating how to get index of currently selected tab
var active = $("#tabs").tabs( "option", "active" );
console.log(active);
答案 5 :(得分：1)
如果您真的想要“只是”标签功能，那么的最短路径似乎是：
jsFiddle演示（使用极少改变的jQuery示例）：https://jsfiddle.net/uy986516/
因为如果你不需要jQuery样式，你真正需要什么？不多......
jQuery( function($){
var $myCoolTabsWrap = $('.myCoolTabsWrap');
if( $myCoolTabsWrap.length > 0 ){
$myCoolTabsWrap.find('> ul a').not('.realLink').click(function(e){
e.preventDefault();
var $me = $(this);
$myCoolTabsWrap.find('.active').removeClass('active');
$me.parent().add( $me.attr('href') ).addClass('active');
});
}
});
只留下这个功能性的CSS：
.myCoolTabsWrap > ul li{ display: inline-block; }
.myCoolTabsWrap > div{ display: none; }
.myCoolTabsWrap > div.active{ display: block; }
HTML语法与其他功能相同：
1。默认情况下隐藏包含内容的面板，必须为选项卡＆amp; panel 手动完成预先选择，方法是为其提供“活动”类（但是经常被通缉......）。用户选择标签和面板以及“主动”课程给予它们 自动 。
2。 Tab是一个实际的链接？ - 没问题 - 只需给它链接“realLink”类。
<div id="tabs" class="myCoolTabsWrap">
<ul>
<li><a href="#tabs-1" class="active">Tab 1 link text</a></li>
<li><a href="#tabs-2">Tab 2 link text</a></li>
<li><a href="#tabs-3">Tab 3 link text</a></li>
<li><a href="https://google.cz/" target="_blank" class="realLink">An actual link text</a></li>
</ul>
<div id="tabs-1" class="active">
Some of your cool html / text.
</div>
<div id="tabs-2">
Some of your cool html / text.
</div>
<div id="tabs-3">
Some of your cool html / text.
</div>
</div>
答案 6 :(得分：0)
由于跨窗口小部件依赖性，它可能不可行。
但是，只需使用CSS的级联特性。包括对jQuery UI CSS的引用，然后包含对您自己的引用，它将覆盖jQuery UI样式。
答案 7 :(得分：0)
我知道这是一个古老的问题，但是由于它在Google上排名第一，因此“ jquery ui tabs no style”是我的解决办法
// Remove the annoying jQuery UI classes when we create the tabs.
$('#tabs').tabs().removeClass (function (index, className) {
return (className.match (/(^|\s)ui-\S+/g) || []).join(' ');
});