Javascript 如何更改CSS中选定的选项卡颜色
这是我的标签CSS代码。当我点击标签时,标签颜色应该改变Javascript 如何更改CSS中选定的选项卡颜色,javascript,jquery,css,jquery-ui,Javascript,Jquery,Css,Jquery Ui,这是我的标签CSS代码。当我点击标签时,标签颜色应该改变 /* #tab1 */ .custom #tabbuttons .tab1 a { background: #F6F6F6; color: #1C94C4; } /* override UI Theme */ .custom #tabbuttons .tab1 {background:#006699} .custom #tabbuttons .tab1 a:hover{background: #FDF
/* #tab1 */
.custom #tabbuttons .tab1 a { background: #F6F6F6; color: #1C94C4; } /* override UI Theme */
.custom #tabbuttons .tab1 {background:#006699}
.custom #tabbuttons .tab1 a:hover{background: #FDF5CE;color:#FF0000}
.custom #tabpanels #tab1,
.custom #tab1 .ui-layout-resizer-sliding ,
.custom #tab1 .ui-layout-west , /* sidebar panes too - for when 'sliding' */
.custom #tab1 .ui-layout-east { background: #4794D8; }
.custom #tab1 .ui-layout-resizer-closed { border: 1px solid #4cbf52; }
.custom #tab1 .toolbar ,
.custom #tab1 .ui-widget-header { background: #CEE3F6; border: 0; }
.custom #tab1 .ui-widget-footer { background: #CEE3F6; border: 0; }
/*
.custom #tab1 > .ui-layout-center ,
.custom #tab1 .ui-layout-pane .ui-layout-pane { border: 2px solid #4cbf52; }
.custom #tab1 .ui-widget-content { border: 1px solid #16b81e; }
*/
/* #tab2 */
.custom #tabbuttons .tab2 a { background: #F6F6F6; color: #1C94C4; } /* override UI Theme */
.custom #tabbuttons .tab2 a:hover{background: #FDF5CE;color:#FF0000}
.custom #tabpanels #tab2,
.custom #tab2 .ui-layout-resizer-sliding ,
.custom #tab2 .ui-layout-west , /* sidebar panes too - for when 'sliding' */
.custom #tab2 .ui-layout-east { background: #4794D8; }
.custom #tab2 .ui-layout-resizer-closed { border: 1px solid #4cbf52; }
.custom #tab2 .toolbar ,
.custom #tab2 .ui-widget-header { background: #CEE3F6; border: 0; }
.custom #tab2 .ui-widget-footer { background: #CEE3F6; border: 0; }
/*
.custom #tab2 > .ui-layout-center ,
.custom #tab2 .ui-layout-pane .ui-layout-pane { border: 2px solid #4cbf52; }
.custom #tab2 .ui-widget-content { border: 1px solid #16b81e; }
*/
我已经尝试了以下代码,以改变颜色时,它选择
.custom #tabbuttons .tab1 a:selected{background: #FDF5CE;color:#FF0000}
或
或
但是没有人为我工作
另外,正文中的选项卡编码如下
<UL id="tabbuttons" class="hidden">
<LI class="tab1"><A href="#tab1">Track Location</A></LI>
<LI class="tab2"><A href="#tab2">Track Route</A></LI>
</UL>
这里的问题是什么……如何更改选项卡的颜色……请帮助我……我认为您误解了伪选择器的用法() 您需要应用一个类,使您的
通过javascript或其他方式选择。比如:
<ul class="navigation">
<li class="selected"><a href="#">First</a></li>
<li><a href="#">First</a></li>
<li><a href="#">First</a></li>
</ul>
.navigation li {background:red;}
.navigation li.selected {background:blue;}
.navigation li{背景:红色;}
.navigation li.selected{背景:蓝色;}
我认为您误解了伪选择器的用法()
您需要应用一个类,使您的
通过javascript或其他方式选择。比如:
<ul class="navigation">
<li class="selected"><a href="#">First</a></li>
<li><a href="#">First</a></li>
<li><a href="#">First</a></li>
</ul>
.navigation li {background:red;}
.navigation li.selected {background:blue;}
.navigation li{背景:红色;}
.navigation li.selected{背景:蓝色;}
您不能在规则中使用来处理jQuery UI小部件状态,jQuery UI会添加/删除类来反映这种状态
所选选项卡获取所选的ui选项卡。您可以在中查看jQueryTabs小部件的类和元素结构。您的CSS应该如下所示:
.custom #tabbuttons .tab1 a.ui-tabs-selected { background:#FDF5CE; color:#FF0000; }
上面假设您有一个类为custom
的祖先元素,您忘记将其包含在标记中。您不能在规则中使用它来处理jQuery UI小部件状态,jQuery UI会添加/删除类来反映这一点
所选选项卡获取所选的ui选项卡。您可以在中查看jQueryTabs小部件的类和元素结构。您的CSS应该如下所示:
.custom #tabbuttons .tab1 a.ui-tabs-selected { background:#FDF5CE; color:#FF0000; }
以上假设您有一个带有类custom
的祖先元素,您忘记将其包含在标记中。您必须保持问题的简洁性和针对性。您必须保持问题的简洁性和针对性。谢谢您的回答。。。我添加了这样的代码,.custom#tabbuttons.tab2 li.selected{background color:#006699;color:#FF0000;}只有前景色(选项卡名称)在选择时发生了更改..但背景没有更改..我所做的…请帮助我..您的需要是块或内联块元素,才能使某些属性正常工作。设置显示:内联块或显示:块-取决于您希望它的行为。感谢您的回复。。。我添加了这样的代码,.custom#tabbuttons.tab2 li.selected{background color:#006699;color:#FF0000;}只有前景色(选项卡名称)在选择时发生了更改..但背景没有更改..我所做的…请帮助我..您的 需要是块或内联块元素,才能使某些属性正常工作。设置显示:内联块或显示:块-取决于您希望它的行为方式。