Question

想方设法将有效/当前标签css添加到ddtablemenu。

默认情况下，加载后始终显示第一个标签。在贴上第2或第3个标签后，标签颜色变为红色（与悬停相同）。当活动或当前时，在底部中心添加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

Answer 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>

活动/当前Tabs css

1 个答案: