活動/當前標籤css

尋找一種方法來添加活動/當前標籤css到ddtablemenu。活動/當前標籤css

默認情況下，加載後始終顯示第一個選項卡。在第二個或第三個選項卡上閃爍後，選項卡顏色變爲紅色（與懸停相同）。當活動的或當前，在底部中央添加菜單arrow.png（.solidblockmenu裏。主動）

<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

來源

2013-01-11 Robert Chan

在這裏，我在你的jQuery代碼做了速戰速決[HTTP：/ /jsfiddle.net/DJHZb/8/](http://jsfiddle.net/DJHZb/8/） – djthoms

你用哪種語言做？ –

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

來源

2013-01-12 13:36:43

活動/當前標籤css

回答

相關問題