主頁(yè) > 知識(shí)庫(kù) > CSS標(biāo)簽切換代碼實(shí)例教程比較漂亮

CSS標(biāo)簽切換代碼實(shí)例教程比較漂亮

我們的設(shè)計(jì)越來(lái)越追求一種簡(jiǎn)潔的風(fēng)格，希望在有限的空間內(nèi)展示更多的內(nèi)容。與此同時(shí)我們發(fā)現(xiàn)一些問(wèn)題，內(nèi)容的簡(jiǎn)單排列總使頁(yè)面很長(zhǎng)。滾屏很多才能將顯示的內(nèi)容布局完畢。YAHOO與網(wǎng)易率先應(yīng)用了標(biāo)簽切換的布局方式，打破了常規(guī)布局的局限性，在相同尺寸的區(qū)域內(nèi)，可以放置更多的內(nèi)容。我們只需要點(diǎn)擊不同的選項(xiàng)卡或鏈接就能展開(kāi)內(nèi)容，這并不需要打開(kāi)新的網(wǎng)頁(yè)，只是在同一頁(yè)內(nèi)完成。

一、標(biāo)簽切換總體的實(shí)現(xiàn)思路：

　　實(shí)現(xiàn)這種標(biāo)簽切換的布局有多種方式，也流傳著各種不同的代碼，我們應(yīng)用DIV CSS進(jìn)行布局，首先來(lái)整理一下思路，如何實(shí)現(xiàn)這樣的標(biāo)簽切換效果：
　　1、首先要放置標(biāo)簽切換的容器，可以是選項(xiàng)卡形式，也可以是鏈接的形式；
　　2、放置具體的內(nèi)容，并默認(rèn)顯示其中的一個(gè)為顯示狀態(tài)。其它的內(nèi)容則進(jìn)行隱藏；
　　3、當(dāng)用戶點(diǎn)擊選項(xiàng)卡或鏈接時(shí)，應(yīng)用javascript切換到指定的層進(jìn)行顯示，而其它的內(nèi)容層進(jìn)行隱藏；
　　4、進(jìn)行后期深入，例如，去除鏈接虛線與內(nèi)容層圖文的美化等。

　　我們看最終本實(shí)例的效果圖片：

二、根據(jù)上面的思路我們開(kāi)始整理HTML代碼。我們作了如下規(guī)劃：

div class="woaicss">
    ul class="woaicss_title woaicss_title_bg1" id="woaicsstitle">
    /ul>
    div class="woaicss_con" id="woaicss_con1" style="display:block;">
    /div>
    div class="woaicss_con" id="woaicss_con2" style="display:none;">
    /div>
    div class="woaicss_con" id="woaicss_con3" style="display:none;">
    /div>
    div class="woaicss_con" id="woaicss_con4" style="display:none;">
    /div>
/div>
　　1、我們布置一個(gè)總體的容器，并應(yīng)用類woaicss。
　　2、設(shè)置一個(gè)無(wú)序列表UL作為選項(xiàng)卡或鏈接的容器（下面詳細(xì)介紹）。
　　3、我們分別設(shè)置了四個(gè)層，作為內(nèi)容層（我們假想有四個(gè)切換）。請(qǐng)?zhí)貏e注意這四個(gè)層均應(yīng)用了類
woaicss_con。與此同時(shí)為他們分別指定了不同的id。這是為了讓javascript可以進(jìn)行控制。我們?cè)O(shè)置第
一個(gè)層的樣式為塊元素，即顯示出該內(nèi)容層。而其它三層均進(jìn)行了隱藏。

三、我們開(kāi)始進(jìn)一步完善HTML代碼。無(wú)序列表UL增加一些鏈接：

    ul class="woaicss_title woaicss_title_bg1" id="woaicsstitle">
        li>a href="javascript:void(0)" onclick="javascript:woaicssq(1)">52CSS.com/a>/li>
        li>a href="javascript:void(0)" onclick="javascript:woaicssq(2)">Div CSS教程
/a>/li>
        li>a href="javascript:void(0)" onclick="javascript:woaicssq(3)">CSS布局實(shí)例
/a>/li>
        li>a href="javascript:void(0)" onclick="javascript:woaicssq(4)">WEB標(biāo)準(zhǔn)化/a>/li>
    /ul>
　　1、我們?yōu)闊o(wú)序列表UL應(yīng)用了兩個(gè)類woaicss_title、woaicss_title_bg1，第一個(gè)類可以對(duì)UL及LI、
鏈接進(jìn)行整體的外觀控制。以實(shí)現(xiàn)整體美化效果。我們也為無(wú)序列表UL指定了一個(gè)id為woaicsstitle，目
的在于可以應(yīng)用javascript進(jìn)行樣式控制。
　　2、我們?cè)黾恿怂膫€(gè)鏈接，并對(duì)鏈接目標(biāo)指定為：javascript:void(0)。我們應(yīng)該了解，當(dāng)鏈接為“#
”時(shí)，瀏覽器會(huì)回到頁(yè)面頂部。而此處我們并不希望看到這樣的結(jié)果，因?yàn)樵诤芏嗲闆r下，我們的切換框
并不一定是在網(wǎng)頁(yè)的第一屏，如果點(diǎn)擊鏈接回到頂部，訪客就不會(huì)立即看到內(nèi)容層所出現(xiàn)的變化。失去了
制作標(biāo)簽切換效果的意義。
　　3、我們?yōu)殒溄釉O(shè)置了onclick動(dòng)作avascript:woaicssq(x)。我們?cè)谶@里向javascript傳遞參數(shù)，以
執(zhí)行不同的腳本，實(shí)現(xiàn)切換的效果。

四、開(kāi)始進(jìn)行javascript腳本的編寫(xiě)：

    function woaicssq(num){
    for(var id = 1;id=4;id++)
    {
    var MrJin="woaicss_con"+id;
    if(id==num)
    document.getElementById(MrJin).style.display="block";
    else
    document.getElementById(MrJin).style.display="none";
    }
    if(num==1)
    document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg1";
    if(num==2)
    document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg2";
    if(num==3)
    document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg3";
    if(num==4)
    document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg4";
    }
　　javascript腳本工作原理作簡(jiǎn)要的說(shuō)明：
　　（由于本站52CSS.com僅針對(duì)CSS進(jìn)行討論，這里對(duì)此腳本不作詳細(xì)分析）
　　1、設(shè)置函數(shù)woaicssq，并從標(biāo)簽切換的鏈接中獲取參數(shù)，如：javascript:woaicssq(2)
　　2、聲明變量id為數(shù)值為1并小于等于4。這是我們四個(gè)內(nèi)容層的數(shù)值。
　　3、聲明變量MrJin為"woaicss_con"+id; （請(qǐng)注意我們?cè)诘谝徊襟E所設(shè)置內(nèi)容層的id，如：
id="woaicss_con2"。）當(dāng)id為所指定的數(shù)值時(shí)，則該層的屬性為display="block";。否則層的屬性為
display="none"。即實(shí)現(xiàn)了內(nèi)容層顯示與隱藏的切換功能。
　　4、當(dāng)變量id為1-4其中的某一個(gè)數(shù)值是，對(duì)id為woaicsstitle的容器進(jìn)行樣式定義，如：
woaicss_title woaicss_title_bg3。這樣我們就可以通過(guò)不同的class類，對(duì)切換鏈接進(jìn)行不同的樣式定
義，當(dāng)某一層顯示的時(shí)候，我們可以對(duì)該層所對(duì)應(yīng)的鏈接作出一些指示。如選項(xiàng)卡的突出狀態(tài)等。

五、開(kāi)始CSS的編寫(xiě)：

* {
    list-style-type:none;
    font-size:12px;
    text-decoration:none;
    margin:0;
    padding:0;
}
　　總體布局聲明，去除列表項(xiàng)預(yù)設(shè)標(biāo)記，設(shè)置文字大小為12px，去除文字裝飾線，外邊距與內(nèi)邊距均為
零。

.woaicss {
    width:438px;
    height:300px;
    overflow:hidden;
    margin:50px auto;
}
　　總體標(biāo)簽切換窗口的樣式定義，寬高設(shè)置，溢出為隱藏，上下外邊距為50px，左右為自動(dòng)，實(shí)現(xiàn)水平
居中對(duì)齊。

.woaicss_title {
    width:438px;
    height:30px;
    background:#fff url(btn_bg.png) no-repeat; overflow:hidden;
}
　　無(wú)序列表UL的樣式，寬高設(shè)置，背景圖片為btn_bg.png。

.woaicss_title li {
    display:block;
    float:left;
    margin:0 2px 0 0;
    display:inline;
    text-align:center;
}
　　無(wú)序列表內(nèi)列表項(xiàng)的樣式，設(shè)置為塊元素并應(yīng)用向左的浮動(dòng)，右側(cè)外邊距為2px。將列表項(xiàng)內(nèi)聯(lián)，文
字對(duì)齊方式為居中。

.woaicss_title li a {
    display:block;
    width:90px;
    heigth:30px;
    line-height:34px;
    color:#fff;
}
　　列表項(xiàng)鏈接的樣式，設(shè)置為塊元素并指定了寬高，行高為34px，顏色為白色color:#fff；

.woaicss_title li a:hover {
    color:#f0f0f0;
    text-decoration:underline;
}
　　列表項(xiàng)鏈接的懸停樣式，顏色為#f0f0f0，加下劃線作為裝飾線。

.woaicss_title_bg1 {background-position:0 0;}
.woaicss_title_bg2 {background-position:0 -30px;}
.woaicss_title_bg3 {background-position:0 -60px;}
.woaicss_title_bg4 {background-position:0 -90px;}
　　此四個(gè)樣式的定義請(qǐng)與步驟四javascript腳本進(jìn)行聯(lián)系。即在函數(shù)的值變化時(shí)，相應(yīng)的對(duì)無(wú)序列表的
樣式進(jìn)行重新定義，我們?cè)诖颂帉?duì)背景圖定位進(jìn)行了調(diào)整，實(shí)現(xiàn)了選項(xiàng)卡片的突出狀態(tài)。

.woaicss_con {
    display:block;
    width:438px;
    height:270px;
    background:url(con_bg.png) no-repeat 0 0; overflow:hidden;
}
　　內(nèi)容層的樣式定義，指定寬高，并設(shè)置背景圖片con_bg.png。52CSS.com請(qǐng)您特別注意，這里的背景
圖片與無(wú)序列表UL的背景圖片應(yīng)該是無(wú)縫結(jié)合。即從外觀上它們兩者是一個(gè)整體。

六、內(nèi)容充實(shí)：

　　我們?yōu)閮?nèi)容層填充一定的內(nèi)容，并對(duì)其進(jìn)行美化，例如：（僅說(shuō)明其一，其它三個(gè)雷同。）

    ul>
        li>a href="#" title="">Web Developer插件教程 CSS網(wǎng)頁(yè)布局輔助設(shè)計(jì)利器！詳細(xì)圖文講解
！/a>/li>
        li>a href="#" title="">CSS Templates 頻道4月5日更新增加模板22套/a>/li>
        li>a href="#" title="">XHTML與CSS入門經(jīng)典從零開(kāi)始系列教程！/a>/li>
        li>a href="#" title="">DIV+CSS布局入門示例（目錄）/a>/li>
        li>a href="#" title="">CSS基礎(chǔ)教程17篇 [翻譯Htmldog]/a>/li>
        li>a href="#" title="">DIV CSS布局實(shí)例：用css網(wǎng)站布局之十步實(shí)錄?。夸洠?nbsp;
/a>/li>
        li>a href="#" title="">WEB2.0標(biāo)準(zhǔn)教程循序漸進(jìn)十二天的基礎(chǔ)學(xué)習(xí)！/a>/li>
        li>a href="#" title="">Div+CSS 網(wǎng)頁(yè)布局教程！/a>/li>
    /ul>
　　我們充實(shí)的內(nèi)容層為一個(gè)UL無(wú)序列表，我們對(duì)其進(jìn)行樣式定義：

.woaicss_con ul {
    width:418px;
    height:250px;
    margin:12px auto;
}
.woaicss_con li {
    width:418px;
    line-height:30px;
    margin:0 auto;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow: hidden;
}
.woaicss_con li a {
    color:#03c;
}
.woaicss_con li a:hover {
    color:#069;
    text-decoration:underline;
}
　　此處不是本文重點(diǎn)，所以不再贅述，相關(guān)的知識(shí)請(qǐng)參考：>>> 52CSS.com關(guān)于列表UL制作的文章

七：細(xì)節(jié)修飾

　　我們這里的鏈接并未起到真正的URL轉(zhuǎn)向的作用，僅是一個(gè)標(biāo)簽，所以我們可以將其虛線框去除，以
讓我們的頁(yè)面更加的工整與自然。將下面的代碼另存為xuxian.htc文件：

public:attach event="onfocus" onevent="hscfsy()"/>
script language="javascript">
function hscfsy(){
this.blur();
}
/script>
　　我們?cè)贑SS樣式中添加這一句代碼：a {behavior:url(xuxian.htc)}
　　這樣就可以去除了鏈接虛線框（請(qǐng)注意在FF中此效果無(wú)效）。

八：最終效果及舉一反三：

　　我們最終即可實(shí)現(xiàn)了這樣的效果，您可以 >>> 點(diǎn)擊這里查看

　　在我們的實(shí)現(xiàn)工作中可能會(huì)遇到另外一種情況：
　　我們需要實(shí)現(xiàn)當(dāng)鼠標(biāo)劃過(guò)時(shí)進(jìn)行切換，當(dāng)鼠標(biāo)點(diǎn)擊時(shí)打開(kāi)相應(yīng)內(nèi)容的鏈接。
　　我們將無(wú)序列表UL作如下修改即可實(shí)現(xiàn)：

    ul class="woaicss_title woaicss_title_bg1" id="woaicsstitle">
        li>a href="#" onmouseover="javascript:woaicssq(1)">52CSS.com/a>/li>
        li>a href="#" onmouseover="javascript:woaicssq(2)">Div CSS教程/a>/li>
        li>a href="#" onmouseover="javascript:woaicssq(3)">CSS布局實(shí)例/a>/li>
        li>a href="#" onmouseover="javascript:woaicssq(4)">WEB標(biāo)準(zhǔn)化/a>/li>
    /ul>
　　我們通過(guò)些微的調(diào)整即實(shí)現(xiàn)了這樣的效果，

您可能感興趣的文章:

JQuery學(xué)習(xí)筆記實(shí)現(xiàn)圖片翻轉(zhuǎn)效果和TAB標(biāo)簽切換效果
一個(gè)tab標(biāo)簽切換效果代碼
基于JQuery的實(shí)現(xiàn)圖片輪播效果(焦點(diǎn)圖)
jquery中實(shí)現(xiàn)標(biāo)簽切換效果的代碼
jQuery版Tab標(biāo)簽切換
jQuery焦點(diǎn)圖切換特效插件封裝實(shí)例
jquery左右滾動(dòng)焦點(diǎn)圖banner圖片鼠標(biāo)經(jīng)過(guò)顯示上下頁(yè)按鈕
SuperSlide2實(shí)現(xiàn)圖片滾動(dòng)特效
SuperSlide標(biāo)簽切換、焦點(diǎn)圖多種組合插件

標(biāo)簽：滄州上海新疆紅河河南長(zhǎng)治沈陽(yáng) 樂(lè)山

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《CSS標(biāo)簽切換代碼實(shí)例教程比較漂亮》，本文關(guān)鍵詞；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。

佳木斯湛栽影视文化发展公司

CSS標(biāo)簽切換代碼實(shí)例教程 比較漂亮

QQ咨詢

電話咨詢

CSS標(biāo)簽切換代碼實(shí)例教程比較漂亮