活动/当前标签 css答案

【问题标题】：Active/current Tabs css活动/当前标签 css
【发布时间】：2013-01-11 04:53:17
【问题描述】：

寻找一种将活动/当前标签 css 添加到 ddtablemenu 的方法。

默认情况下，加载后总是显示第一个标签。单击第二个或第三个选项卡后，选项卡颜色变为红色（与悬停相同）。激活或当前时，在底部中心添加 menu-arrow.png(.solidblockmenu li .active)

<div id="ddtabs3" class="solidblockmenu">
  <ul>
  <li class="active"><a href="#0" data-toggle="tab" rel="sb1" class="firstelement">Home</a></li>
  <li><a href="#1" data-toggle="tab" rel="sb2">DHTML</a></li>
  <li><a href="#2" data-toggle="tab" rel="sb3">CSS</a></li>
  </ul>
</div>

.solidblockmenu ul{margin: 0;padding: 0;float: left;font: bold 13px Arial;width: 100%;border: 1px solid #625e00;border-width: 1px 0;background: black url(http://www.dynamicdrive.com/dynamicindex1/ddtabmenufiles/media/blockdefault.gif) center center repeat-x;
}
.solidblockmenu li a:hover, .solidblockmenu li a.current{color: white;background: transparent url(http://www.dynamicdrive.com/dynamicindex1/ddtabmenufiles/media/blockactive.gif) center center repeat-x;
}

.solidblockmenu li .active { background-image:url(http://www.asiarooms.com/assets/themes/v1/images/areas/details/menu-arrow.png); background-repeat:no-repeat; background-position:bottom center; }
.solidblockmenu a:hover, .solidblockmenu li .active a { background:#310022 none; }
.solidblockmenu li a.firstelement:hover, .solidblockmenu li .active a.firstelement { background-position:left top; }

Codes here

【问题讨论】：

在这里，我在你的 jQuery 代码中做了一个快速修复http://jsfiddle.net/DJHZb/8/
您使用哪种语言？

标签： css tabs

【解决方案1】：

.nav2{margin-left:0;margin-bottom:20px;list-style:none;width: 100%;background: black url(media/blockdefault.gif) center center repeat-x;}
.nav2>li>a{display:block;color: #fff;}/*Added BJ*/
.nav2>li>a:hover{text-decoration:none;background-color:#ED0F69;color:#fff;}/*Added BJ*/
.nav-tabs2,.nav-tabs2:before,.nav-tabs2:after{display:table;content:"";line-height:0;}
.nav-tabs2:after{clear:both;}
.nav-tabs2>li{float:left;}
.nav-tabs2>li>a{padding-right:12px;padding-left:12px;line-height:14px;}
.nav-tabs2{border-bottom:1px solid #ddd;}
.nav-tabs2>li{margin-bottom:-1px;}
.nav-tabs2>li>a{font-size: 13px;font-weight:bold;padding-top:8px;padding-bottom:8px;line-height:18px;border-right: 1px solid white;}
.nav-tabs2>li>a:hover{border-color:#eeeeee #eeeeee #dddddd;}
.nav-tabs2>.active>a,.nav-tabs2>.active>a:hover{color:#555555;background-color:#ffffff;border-bottom-color:transparent;cursor:default;color: white;
}

.nav-tabs2 a:hover, .nav-tabs2 .active a{ background: transparent url(media/blockactive.gif) center center repeat-x; }
.nav-tabs2 .active { background-image:url(media/menu-arrow.png); background-repeat:no-repeat; background-position:bottom center; }
</style>

                            <div class="box-head tabs">
                                <ul class="nav2 nav-tabs2">
                                    <li class="active">
                                        <a href="#0" data-toggle="tab" class="firstelement">Active Tab</a>
                                    </li>
                                    <li>
                                        <a href="#1" data-toggle="tab">Inactive Tab</a>
                                    </li>
                                    <li>
                                        <a href="#2" data-toggle="tab">Inactive Tab #2</a>
                                    </li>
                                </ul>
                            </div>

【讨论】：