大佬教程收集整理的这篇文章主要介绍了将自定义样式添加到Jquery UI选项卡,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图搞清楚,但仍然没有运气.
这是到目前为止的代码:
<div id="main"> <div class="ui-widget-header ui-corner-top"> <ul> <li><a href="#tabs-1">My Databases</a></li> <li><a href="#tabs-2">Database Stats</a></li> </ul> </div> <div id="tabs-1" class="tabs3"> <p>Database stats</p> </div> <div id="tabs-2" class="tabs3"> <p>You Could not be registered due to a system error. We apologize for any inconvenience.</p> </div> </div>@H_403_7@CSS:
#main { margin-left: 246px; position: relative; padding: 0; } #main ul,.tabs3 { white-space: Nowrap; } #main ul{ border-bottom: medium none; //padding: 6px; height: 25px; border: none; } .ui-tabs .ui-tabs-nav { margin: 0; padding: 0.2em 0.2em 0; border: none; } .ui-tabs .ui-tabs-nav li { border: none; margin: 0 0 -5px 0; } #main ul.ui-widget-header,#main ul.ui-widget-content,#main ul.ui-state-default,#main ul.ui-state-hover { background: none; border: none } #main .ui-tabs-active a { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: url("images/ui-bg_highlight-hard_100_f9f9f9_1x100.png") repeat-x scroll 50% top #F9F9F9; border-color: #CCCCCC; border-image: none; border-style: solid; border-width: 1px 1px 0; color: #222222; position: relative; z-index: 5; }@H_403_7@我的JSfiddle
我的解决方案取决于html5“!important”标记,所以如果它不适合你,请告诉我.
要更改导航栏背景,您必须使用:
.ui-tabs-nav { background-color: #222 !important; /*To overwrite jquery-ui.css*/ height: 30px; /*To stop nav block scaling of tab size*/ }@H_403_7@根据需要更改背景属性.
活动标签由以下方式处理:
#main .ui-tabs-active a { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background-color: white; /*To make it looks like on example pic,it is possible do do with it whatever you want*/ border-color: #CCCCCC; border-style: solid; border-width: 1px 1px 0; border-radius: 5px 5px 0 0; /*To affect only top corners*/ color: #222222; position: relative; z-index: 5; color: black !important; /*To overwrite jquery-ui.css*/ text-decoration: none !important; /*To overwrite jquery-ui.css*/ }@H_403_7@所有其他选项卡由以下处理:
.ui-tabs .ui-tabs-nav li { position: relative; /*To overwrite jquery-ui.css*/ top: -10px !important; /*To overwrite jquery-ui.css*/ border: none; margin: 0 0 -5px 0; background: none; } .ui-tabs-anchor{ color: white !important; /*To overwrite jquery-ui.css*/ text-decoration: underline !important; /*To overwrite jquery-ui.css*/ }@H_403_7@
以上是大佬教程为你收集整理的将自定义样式添加到Jquery UI选项卡全部内容,希望文章能够帮你解决将自定义样式添加到Jquery UI选项卡所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。