用css+div实现的一个简单的标签卡的功能,最终效果如下面两张图片:
代码如下:
<STYLE type="text/css">
* {
list-style-type:none;
font-size:12px;
text-decoration:none;
margin:0;
padding:0;
}
.ucatch {
width:800px;
height:600px;
overflow:hidden;
margin:100px 100px;
}
.p1 {
display:block;
width:186px;
heigth:30px;
line-height:34px;
font-size:12px;
color:3b536a;
font-weight:bold;
background:url(c.png) no-repeat;
}
.p2 {
display:block;
width:161px;
heigth:30px;
line-height:34px;
font-size:12px;
color:898989;
font-weight:bold;
background:url(d.png) no-repeat;
}
.p3 {
display:block;
width:161px;
heigth:30px;
line-height:34px;
font-size:12px;
color:898989;
font-weight:bold;
background:url(e.png) no-repeat;
}
.ucatch_title {
margin-left:30px;
}
.ucatch_title li {
display:block;
float:left;
margin:11px 0 0 0;
display:inline;
text-align:center;
}
.ucatch_body {
clear:both;
display:block;
width:800px;
height:500px;
background:url(a.png) no-repeat; overflow:hidden;
}
.bb {
width:800px;
height:85px;
background:url(b.png) no-repeat; overflow:hidden;
}
.ucatch_text{
margin:10px 0 0 20px;
font:LMAnomRegExt;
font-size:28px;
color:white;
font-weight:bold;
}
.test{
margin:10px 0 0 10px;
background:white;
width:780px;
height:365px;
}
</STYLE>
<script language="javascript">
function ucatch(num){
for(var id = 1;id<=2;id++)
{
var testbody="test"+id;
var p = "p"+id;
if(id==num){
document.getElementById(testbody).style.display="block";
document.getElementById(p).className="p1";
}
else{
document.getElementById(testbody).style.display="none";
if(id==1){
document.getElementById(p).className="p3";
}else{
document.getElementById(p).className="p2";
}
}
}
}
</script>
<div class="ucatch">
<div class="bb">
<div class="ucatch_text">UCATCH</div>
<ul class="ucatch_title" id="woaicsstitle">
<li><a class="p1" id="p1" xhref="javascript:void(0)" onclick="javascript:ucatch(1)">Tab One</a></li>
<li><a class="p2" id="p2" xhref="javascript:void(0)" onclick="javascript:ucatch(2)">Tab Two</a></li>
</ul>
</div>
<div class="ucatch_body">
<div class="test" id="test1" style="display:block;">欢迎来到UCATCH</div>
<div class="test" id="test2" style="display:none;">www.ucatch.cn</div>
</div>
</div>
分享到:
相关推荐
css+div漂亮的圆角tab选项卡css+div漂亮的圆角tab选项卡css+div漂亮的圆角tab选项卡
javascript和css+div实现的选项卡效果
css + div 滑动弹出div效果,可自定义弹出效果。
培训资料CSS+div建站基本教程,PPT格式. 培训资料CSS+div建站基本教程,PPT格式.
CSS+DIV流畅的选项卡 CSS+DIV流畅的选项卡 CSS+DIV流畅的选项卡
css+div+js实现简单导航栏开发;该页面简单明了,通俗易懂
后台模板 css+div+html后台模板 css+div+html后台模板 css+div+html后台模板 css+div+html后台模板 css+div+html后台模板 css+div+html后台模板 css+div+html后台模板 css+div+html后台模板 css+div+html后台模板 ...
CSS+DIV光盘程序CSS+DIV光盘程序CSS+DIV光盘程序CSS+DIV光盘程序CSS+DIV光盘程序
DIV+CSS+JavaScript实现tab切换的选项卡,进一步提升web开发技术.希望能够帮助到你,共享给大家.
精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局....
CSS+DIV布局案例CSS+DIV布局案例CSS+DIV布局案例CSS+DIV布局案例
html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习html+div+css+js学习html+div+css+js学习 html+div+css+js学习...
CSS+DIV 布局 主要是一个网上书店的模板 精美布局 只要想的到 就能做得到
CSS+div教程CSS+div教程CSS+div教程CSS+div教程CSS+div教程
jsp css+div 后台框架 jsp css+div 后台框架 jsp css+div 后台框架 jsp css+div 后台框架 比较完美的后台框架
CSS+DIV 20个经典实例(上)CSS+DIV 20个经典实例(上)CSS+DIV 20个经典实例(上)CSS+DIV 20个经典实例(上)CSS+DIV 20个经典实例(上)CSS+DIV 20个经典实例(上)CSS+DIV 20个经典实例(上)
第12章 CSS+div美化与布局实战 12.1 框架搭建 12.2 实例一:蓝色经典 12.3 实例二:清明上河图 12.4 实例三:交河故城 12.5 自动选择CSS样式 第3部分 CSS混合应用技术篇 第13章 ...
css+div实现大括号 1、完整的代码示例;2、清晰的效果图
css+div实现图片内阴影效果源码免费下载
别人分享的资料,我只是拿出来和大家分享一下,希望能给做网页的朋友一点帮助。如果拿这资源做坏事,与我无关。