實現tab頁并水平居中

ruby {

font-size:60px;

color:red;

font-family:微軟雅黑;

}

.tab {

border:solid 1px;

border-color:rgb(80,160,91);

width:500px;

margin:0 auto;

text-align:left;

}

.hd {

background-color:rgb(230,242,230);

height:25px;

width:100%;

border-bottom:solid 1px;

border-color:rgb(80,160,91);

}

.hd ul {

padding:0;

margin:0;

height:26px;

overflow: hidden;

}

.hd .nomal {

font-size:14px;

height:26px;

line-height:25px;

float:left;

width:24%;

text-align:center;

border-right:solid 1px;

border-color:rgb(80,160,91);

cursor:pointer;

list-style:none;

}

.hd .activeTab {

background:white;

font-weight: bold;

}

#content {

padding:20px 10px;

}

function tabClick(){

if($(this).hasClass('activeTab'))

return;

$('.hd ul li').removeClass('activeTab');

$(this).addClass('activeTab');

var tabId = $(this).attr('tabId');

$('#content > div').hide();

$('#' + tabId).show();

}

$(document).ready(function(){

$('.hd ul li').click(tabClick);

})

• 漢字的拼音
• 漢字的日文
• 張軍的拼音
• 總體

漢hàn字zì

漢かん字じ

張zhāng軍jūn

漢hàn字zì漢かん字じ張zhāng軍jūn

總結

以上是生活随笔為你收集整理的js css3实现tab,div+css+js实现tab页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。