上海網站seo優化 聚眾網絡只做有價值的網站

當前位置:首頁 > 行業動態 > 上海網站seo優化

上海seo:網頁設計|選項卡頁面設計

來源:【上海seo 】      人氣:【 89

網頁設計|選項卡頁面設計
'

選項卡頁面設計的基本思路是將n個div內容塊疊在相同的位置,然后通過JS控制每個div內容塊的CSS屬性,實現需要內容的顯示(其它塊的暫時隱藏)。

簡單的效果演示所下:

視頻加載中...

1 HTML代碼

<div id="mainx">

<div class="main"><!--2 main -->

<div class="left">

<div id="tab">

<h3 class="up" onclick="goto1(1);">知與行</h3>

<h3 onclick="goto1(2);">聽、講故事</h3>

<h3 onclick="goto1(3);">學習網站</h3>

<h3 onclick="goto1(4);">視頻網站</h3>

<h3 onclick="goto1(5);">15</h3>

<!--p11 start -->

<div class="block" id="c11">

<p>&nbsp;</p>

</div>

<!--p11 end -->

<!--p12 start -->

<div>

</div> <!--p12 end -->

<!--p13 start -->

<div>

<a href="http://www.91118.com/">快樂學堂—小學生同步學習及親子教育的專業網站!</a>

</div>

<div>

<ul>

<li><a href="http://tv.cctv.com/lm/wmzl/videoset/">文明之旅</a></li>

<li><a href="http://v.baidu.com/show/1797.htm?&amp;q=%E5%BC%80%E8%AE%B2%E5%95%A6">開講了</a></li>

<li><a href="http://v.baidu.com/show/5836.htm?&amp;q=%E7%99%BE%E5%AE%B6%E8%AE%B2%E5%9D%9B" >百家講壇</a></li>

<li><a href="http://v.baidu.com/show/1555.htm?&amp;q=%E8%AF%BB%E4%B9%A6">讀書</a></li>

</ul>

</div>

2 CSS代碼

#tab {

position:relative;

width:100%;/* 定義選項卡的整體寬度 */

height:208px;

clear:both;

}

#tab div {

position:absolute;

top:28px;

left:0px;

width:100%;

height:180px;

display:none;

}

#tab .block{

display:block;

padding-bottom:6px;

border-right: #eee 1px dashed;

}

#tab h3{

float:left;

width:18.95%;

height:1.625em;

margin:1px 0px;

line-height:1.625em;

font-size:1em;

font-weight:normal;

text-align:center;

color:#00007F;

background:#EEEEEE url(tab_bg.gif) no-repeat right top;

background-position:right;

cursor:url(zfirst/css/rose.ani);

display:block;

overflow:hidden;

margin-left:2px;

border-bottom:2px solid #ddd;

border-right:2px solid #ddd;

}

#tab .up {

background:#fff url(tab_up_bg.gif) no-repeat;

margin-left:2px;

border-top:2px solid #eee;

border-left:2px solid #eee;

border-right:2px solid #eee;

border-bottom:0px solid #fff

}

3 JS代碼

function goto1(ao){

var h=document.getElementById("tab").getElementsByTagName("h3");

var d=document.getElementById("tab").getElementsByTagName("div");

for(var i=0;i<10;i++){

if(ao-1==i){

h[i].className+=" up";

d[i].className+=" block";

}

else {

h[i].className=" ";

d[i].className=" ";

}}}

上海網站seo優化找【聚眾網絡】,我們有很多成功案例,專業的事交給專業的人。

千炮捕鱼联网版 北京pk开奖直播 nba预测篮彩 棋牌室 天津时时后三走势图 福建体彩直播现场 天津开奖 北京时时一天多少期 彩26选5走 贵州十一选五开奖遗漏 黑龙江时时停了么 舟山体彩飞鱼开奖号码 胜利足球2014免费版 君王网上棋牌室 天津时时有什么漏洞 中国福利快乐十分 168kai极速时时彩走势图