用CSS怎么做選項(xiàng)卡？

授之于魚 不如.....呵呵 上面的給你了代碼 我來(lái)給你說(shuō)下思路吧。這里最重要的是 css里的 display:none 這個(gè)的使用，當(dāng)鼠標(biāo)點(diǎn)中一個(gè)選項(xiàng)卡時(shí)，將自身的css中的display:none去掉 讓其顯示出來(lái)，讓其他的選項(xiàng)卡中的css中添加display:none， 隱藏其他的選項(xiàng)卡。其實(shí)就是這個(gè)簡(jiǎn)單 ，具體的實(shí)現(xiàn)方法就是用js實(shí)現(xiàn)的。實(shí)現(xiàn)的方法有多種，上面給你的只是其中的一種。你可以去網(wǎng)上多搜些這方面的源代碼，多多學(xué)習(xí)，希望你能編寫出屬于自己的代碼~

成都創(chuàng)新互聯(lián)公司是一家企業(yè)級(jí)云計(jì)算解決方案提供商,超15年IDC數(shù)據(jù)中心運(yùn)營(yíng)經(jīng)驗(yàn)。主營(yíng)GPU顯卡服務(wù)器，站群服務(wù)器，達(dá)州服務(wù)器托管，海外高防服務(wù)器，成都機(jī)柜租用，動(dòng)態(tài)撥號(hào)VPS，海外云手機(jī)，海外云服務(wù)器，海外服務(wù)器租用托管等。

跪求純CSS 網(wǎng)頁(yè)選項(xiàng)卡 制作方法

你的是什么瀏覽器，我沒有發(fā)現(xiàn)不兼容呀?。?！

這個(gè)例子用到的都是通用標(biāo)記嘛?。?！

==========================================

CSS做選項(xiàng)卡，簡(jiǎn)單地講就是，先定義，再引用。

你也可以照著你說(shuō)的這個(gè)例子自己做做看，這個(gè)沒有多少難度。

=======================================================

PS：對(duì)“兼容”不是這么理解的，這個(gè)例子中的CSS定義模塊，十分明確各個(gè)模塊的功能和用途，而最終的效果是引用這些模塊來(lái)實(shí)現(xiàn)的，你隨便去刪“模塊”，肯定出問題嘛。就像JS你隨便刪語(yǔ)句不能運(yùn)行一樣，但這不是“兼容”問題??！

div css的tab選項(xiàng)卡效果

span id="ContentArea"html

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312"

title網(wǎng)頁(yè)特效/title

/head

style type="text/css"

#dNavBar{

background-color:#ffffff;

}

#dNavBar li{

list-style-type:none;

float:left;

width:84px;

height:28px;

line-height:28px;

font-size:12px;

color:#FFFFFF;

border:3px solid #ffffff;

background-color:#86C2FF;

text-align:center;

display:block;

cursor:pointer;

}

#subMenu{

background-color:#0000FF;

width:500px;

border-left:3px solid #ffffff;

border-right:3px solid #ffffff;

height:29px;

line-height:29px;

color:#FFFFFF;

font-size:12px;

padding-left:10px;

}

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

a:link {

color: #FFFFFF;

text-decoration: none;

}

a:hover{

color: #FFFFFF;

text-decoration: none;

}

a:visited{

color: #FFFFFF;

text-decoration: none;

}

/style

script language="javascript"

function ShowMenu()

{

var barCTT=document.getElementById("dNavBar")

var liArr=barCTT.getElementsByTagName("li")

var links=new Array()

links[0]="a href='#'當(dāng)前位置：首頁(yè)"

links[1]="a href='#'項(xiàng)目一/a | a href='#'項(xiàng)目二/a | a href='#'項(xiàng)目三/a | a href='#'項(xiàng)目四/a"

links[2]="a href='#'項(xiàng)目一/a | a href='#'項(xiàng)目二/a | a href='#'項(xiàng)目三/a"

links[3]="a href='#'項(xiàng)目一/a | a href='#'項(xiàng)目二/a | a href='#'項(xiàng)目三/a | a href='#'項(xiàng)目四/a | a href='#'項(xiàng)目五/a"

links[4]="a href='#'項(xiàng)目一/a | a href='#'項(xiàng)目二/a"

links[5]="a href='#'項(xiàng)目一/a | a href='#'項(xiàng)目二/a | a href='#'項(xiàng)目三/a"

links[6]="a href='#'項(xiàng)目一/a | a href='#'項(xiàng)目二/a"

links[7]="a href='#'項(xiàng)目一/a | a href='#'項(xiàng)目二/a"

links[8]="a href=''項(xiàng)目一/a | a href='#'項(xiàng)目二/a"

links[9]="a href='#'項(xiàng)目一/a | a href='#'項(xiàng)目二/a"

links[10]="a href='#'項(xiàng)目一/a| a href='#'項(xiàng)目二/a"

links[11]="a href='#'項(xiàng)目一/a | a href='#'項(xiàng)目二/a"

links[12]="a href='#'項(xiàng)目一/a | a href='#'項(xiàng)目二/a"

for (i=0;iliArr.length;i++)

{

liArr[i].onclick=function()

{

selectThis(this,liArr,links)

}

}

}

function selectThis(indexObj,allLi,infoArr)

{

var index=0;

for (i=0;iallLi.length;i++)

{

allLi[i].style.border="3px solid #ffffff";

allLi[i].style.backgroundColor="#86C2FF";

allLi[i].style.height="28px";

if (indexObj==allLi[i])

{

index=i;

}

}

indexObj.style.borderBottom="0px solid #666688";

indexObj.style.backgroundColor="#0000FF";

indexObj.style.height="31px";

document.getElementById("subMenu").innerHTML=infoArr[index];

}

/script

body onLoad="ShowMenu()"

div id="dNavBar" style="float:none; width:560px;"li首頁(yè)/lili娛樂快報(bào)/lili音樂天地/lili極品FLASH/li

/div

div id="subMenu"站務(wù)公告/div

/body

/html

/span

選項(xiàng)卡css怎樣控制默認(rèn)顯示第一個(gè)？

給所有的選項(xiàng)卡添加style ： display：none；

然后寫一個(gè)class： .on{display: block;}

將這個(gè)class給第一個(gè)選項(xiàng)卡。

用js或者jQuery寫：當(dāng)鼠標(biāo)移動(dòng)到選項(xiàng)卡上方時(shí)，給該選項(xiàng)卡添加class（.on）：addClass("on")，鼠標(biāo)離開時(shí)移出class（.on）:removeClass("on");

關(guān)于div+css選項(xiàng)卡問題

div+css只是頁(yè)面的樣式控制，他沒有切換的顯示功能，只有通過(guò)其他語(yǔ)言來(lái)控制的，如果沒有js的控制是無(wú)法達(dá)到預(yù)期的效果的

名稱欄目：css選項(xiàng)卡樣式,純css實(shí)現(xiàn)漂亮的選項(xiàng)卡切換
本文來(lái)源：http://www.rwnh.cn/article30/dsigpso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、定制網(wǎng)站、域名注冊(cè)、營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)