纯CSS制作的TAB切换效果 视频

html-css015

纯CSS制作的TAB切换效果 视频,第1张

这个没有专门的 你可以去前沿科技的网站 上面有关于css设计彻底研究的视频 详细讲解了是怎么做出来的 不过纯css似乎是无法做出完美效果的 必须配上JavaScript脚本才行 你可以用Dreamweaver CS3 上面有专门的控件 可以自动帮你 生成 不过需要你手动修改它的css代码来改变外观 我做的有 可以把实例发给你

这个叫tab切换，前些日子写了个，你可以直接复制代码自己改改用

zhaoyue点name/稍后会写一个简洁的jquery的tab切换

只把“点”换成“.”就ok了

效果如下：

这个效果可以通过js与iframe的结合来实现。

也可以通过jquery来实现。

下面是我写的通过jquery来实现的源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{

padding:0px

margin:0px

}

ul{

margin-top:30px

list-style:none

float:left

}

ul li{

float:left

display:block

margin-right:10px

border:1px solid #09F

padding:5px

font-size:13px

}

span{

font-size:13px

margin-left:20px

margin-right:10px

}

.textsty{

width:250px

}

div.theShow{

padding-top:20px

border:1px solid #06F

}

#test1 p{

margin-bottom:15px

}

</style>

<script type="text/javascript" src="childHL/jquery.js"></script>

<script type="text/javascript" >

function loadhtml(oObj,num){

for(var i=1i<=3i++){

$("#thUl li:nth-child("+i+")").css({background: "none"})

}

$("#thUl li:nth-child("+num+")").css({background: "#09F"})

if(num==1){

setTimeout("$('#test1').load('childHL/theOne.html')",100)//通过这句实现页面的切换

}

else if(num==2){

setTimeout("$('#test1').load('childHL/theTwo.html')",100)

}

else if(num==3){

setTimeout("$('#test1').load('childHL/theThree.html')",100)

}

}

</script>

</head>

<body>

<ul id="thUl">

<li onclick="loadhtml(this,1)" style="background:#09F">网页</li>

<li onclick="loadhtml(this,2)" style=" background:none">MP3</li>

<li onclick="loadhtml(this,3)" style="background:none">视频</li>

<li>图片</li><!---这一个子页面没有做，故没有添加相应的函数--->

</ul>

<div style="clear:left"></div>

<div class="theShow" id="test1">

<p>

<span>Bai 百度:</span><input class="textsty" type="text" /><input type="submit" value="搜索" />

</p>

</div>

</body>

</html>

关于iframe的我还没有做，等我做好后，再来show给你看（估计那时候早就有高人帮你解答了）。

另外也可以通过层的显示与隐藏来实现。