我是否可以在不破坏其他UI组件样式的情况下删除整个jQuery UI选项卡样式？
我想完全自定义jQuery UI选项卡而不破坏jQuery UI日期选择器的样式？ 这是可行的还是我应该做自定义工作而不是使用jQuery UI选项卡？
$("#mytabs").tabs() 此示例显示了可能应用的大多数ui类..您可以仅为#mytab的子项重置它们。
#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-tabs-”无论如何所以他们不应该干涉..
这是可能的，但我认为编写自己的标签更容易。 看一下这个链接： jquery ui tabs主要的样式更改
也许这种微小侵入性的CSS骨架有帮助。 观察到只有JQuery UI定义的ui-tabs类（及其后代ul> li）被设置样式，这避免了触及theme-roller-generated jquery-ui-1.8.18x.custom.css中包含的其他ui相关类（我永远不会仅通过研究该文件就得到了这个想法）。
/* 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 { ... }
偶然发现了类似的问题。 下面列出了解决方案和演示
我要感谢以下源代码，它为CSS代码提供了很好的示例 – http://keith-wood.name/uitabs.html
另外，我要感谢jquery团队及其示例代码 – http://jqueryui.com/tabs/
HTML
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.
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.
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.
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.
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);
DEMO
如果你真的想要“只”选项卡function的最短路径似乎是：
RDIY“宁愿自己动手”
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'); }); } });
只留下这个function性的CSS：
.myCoolTabsWrap > ul li{ display: inline-block; } .myCoolTabsWrap > div{ display: none; } .myCoolTabsWrap > div.active{ display: block; }
HTML语法与其他function相同：
1.默认情况下隐藏具有内容的面板，必须通过给它们“活动”类 （但通常需要…）来手动为选项卡和面板进行预选择 。 用户选择选项卡和面板以及“主动”类给予它们是自动完成的。
2. Tab是一个实际的链接？ – 没问题 – 只需给它链接“realLink”类。
Some of your cool html / text. Some of your cool html / text. Some of your cool html / text.
在应用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');
由于跨窗口小部件依赖性，它可能不可行。
但是，只要利用CSS的级联性质。 包括对jQuery UI CSS的引用，然后包含对您自己的引用，它将覆盖jQuery UI样式。
我知道这是一个古老的问题但是因为它在Google上的“jquery ui tabs no style”是＃1，这是我的修复：
// 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(' '); });