上海龙8娱乐客户端 seo优化 聚众网络只做有价值的龙8娱乐客户端 

当前位置:首页 > 行业动态 > 上海龙8娱乐客户端 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);">学习龙8娱乐客户端 </h3>

<h3 onclick="goto1(4);">视频龙8娱乐客户端 </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/" rel="nofollow">快乐学堂—小学生同步学习及亲子教育的专业龙8娱乐客户端 !</a>

</div>

<div>

<ul>

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

<li><a href="http://v.baidu.com/show/1797.htm?&amp;q=%E5%BC%80%E8%AE%B2%E5%95%A6" rel="nofollow">开讲了</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" rel="nofollow" >百家讲坛</a></li>

<li><a href="http://v.baidu.com/show/1555.htm?&amp;q=%E8%AF%BB%E4%B9%A6" rel="nofollow">读书</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=" ";

}}}

上海龙8娱乐客户端 seo优化找【聚众网络】,我们有很多成功案例,专业的事交给专业的人。

  • 在线客服
  • 返回顶部