div+css仿163选项卡的简单版

转载 2007年10月05日 06:17:00

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>标准布局应用:选项卡</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="PR" />
<script type="text/javascript">
</script>
<style type="text/css">
/* 选项卡关键属性 */
#tab {
width:570px;
height:260px;
position:relative;
}

/*设置容器高宽等*/
html > body #tab {
width:566px;
}

/*兼容IE6:IE6下宽度不够*/
#tab div {
position:absolute;
top:26px;
left:0;
width:564px;
height:234px;
border:solid #eee;
border-width:0 1px 1px;
}

/*设置容器高宽等*/
#tab div {
display:none;
}

/*设置容器默认隐藏:不用ID是因为下面将利用class来控制容器显示,而class优先级低于id选择器*/
#tab .block {
display:block;
}

/*选中的容器*/
#tab h3 {
float:left;
width:114px;
height:26px;
line-height:26px;
margin:0 -1px 0 0;
font-size:14px;
cursor:pointer;
font-weight:400;
text-align:center;
color:#00007F;
background:#eee url(/upload/teaching/tab.gif) no-repeat;
}

/*默认标题样式*/
#tab .up {
background:#fff url(/upload/teaching/tab1.gif) no-repeat;
}

/*选中的标题样式*/
/*修饰列表内容*/
#tab ul {
margin:15px 0 0;
list-style:none;
padding:0;
}

#tab li {
float:left;
width:50%;
background:url(http://blog.pr1984.com/attachments/month_0612/a20061212105235.gif) no-repeat 25px 10px;
}

#tab li a {
display:block;
width:84%;
height:25px;
line-height:25px;
margin-left:8%;
font-size:12px;
text-decoration:none;
color:#333;
background:url(http://blog.pr1984.com/attachments/month_0612/g20061212105238.gif) repeat-x left bottom;
text-indent:10px;
}

#tab li a:hover {
text-decoration:underline;
color:red;
}
</style>
</head>
<body>
<div id="tab">
  <h3 class="up" onclick="go_to(1);">选择一</h3>
  <div class="block">
    <ul>
      <li><a href="#">11111111111111 </a></li>
      <li><a href="#">从人大代表侯建军终审 </a></li>
      <li><a href="#">车辆交付问题 </a></li>
      <li><a href="#">贻误申请执行期限损失 </a></li>
      <li><a href="#">民警特权扣车,油变成 </a></li>
      <li><a href="#">地下室及公摊面积不收 </a></li>
      <li><a href="#">当前医疗广告存在的问 </a></li>
      <li><a href="#">新医改要注意的几个问 </a></li>
      <li><a href="#">张钰和于连的同源悲剧 </a></li>
      <li><a href="#">从人大代表侯建军终审 </a></li>
      <li><a href="#">车辆交付问题 </a></li>
      <li><a href="#">贻误申请执行期限损失 </a></li>
      <li><a href="#">民警特权扣车,油变成 </a></li>
      <li><a href="#">地下室及公摊面积不收 </a></li>
      <li><a href="#">当前医疗广告存在的问 </a></li>
      <li><a href="#">新医改要注意的几个问 </a></li>
    </ul>
  </div>
  <h3 onclick="go_to(2);">选择二</h3>
  <div>
    <ul>
      <li><a href="#">22222222222222222 </a></li>
      <li><a href="#">从人大代表侯建军终审 </a></li>
      <li><a href="#">车辆交付问题 </a></li>
      <li><a href="#">贻误申请执行期限损失 </a></li>
      <li><a href="#">民警特权扣车,油变成 </a></li>
      <li><a href="#">地下室及公摊面积不收 </a></li>
      <li><a href="#">当前医疗广告存在的问 </a></li>
      <li><a href="#">新医改要注意的几个问 </a></li>
      <li><a href="#">张钰和于连的同源悲剧 </a></li>
      <li><a href="#">从人大代表侯建军终审 </a></li>
      <li><a href="#">车辆交付问题 </a></li>
      <li><a href="#">贻误申请执行期限损失 </a></li>
      <li><a href="#">民警特权扣车,油变成 </a></li>
      <li><a href="#">地下室及公摊面积不收 </a></li>
      <li><a href="#">当前医疗广告存在的问 </a></li>
      <li><a href="#">新医改要注意的几个问 </a></li>
    </ul>
  </div>
  <h3 onclick="go_to(3);">选择三</h3>
  <div>
    <ul>
      <li><a href="#">333333333333333 </a></li>
      <li><a href="#">从人大代表侯建军终审 </a></li>
      <li><a href="#">车辆交付问题 </a></li>
      <li><a href="#">贻误申请执行期限损失 </a></li>
      <li><a href="#">民警特权扣车,油变成 </a></li>
      <li><a href="#">地下室及公摊面积不收 </a></li>
      <li><a href="#">当前医疗广告存在的问 </a></li>
      <li><a href="#">新医改要注意的几个问 </a></li>
      <li><a href="#">张钰和于连的同源悲剧 </a></li>
      <li><a href="#">从人大代表侯建军终审 </a></li>
      <li><a href="#">车辆交付问题 </a></li>
      <li><a href="#">贻误申请执行期限损失 </a></li>
      <li><a href="#">民警特权扣车,油变成 </a></li>
      <li><a href="#">地下室及公摊面积不收 </a></li>
      <li><a href="#">当前医疗广告存在的问 </a></li>
      <li><a href="#">新医改要注意的几个问 </a></li>
    </ul>
  </div>
  <h3 onclick="go_to(4);">选择四</h3>
  <div>
    <ul>
      <li><a href="#">444444444444444 </a></li>
      <li><a href="#">从人大代表侯建军终审 </a></li>
      <li><a href="#">车辆交付问题 </a></li>
      <li><a href="#">贻误申请执行期限损失 </a></li>
      <li><a href="#">民警特权扣车,油变成 </a></li>
      <li><a href="#">地下室及公摊面积不收 </a></li>
      <li><a href="#">当前医疗广告存在的问 </a></li>
      <li><a href="#">新医改要注意的几个问 </a></li>
      <li><a href="#">张钰和于连的同源悲剧 </a></li>
      <li><a href="#">从人大代表侯建军终审 </a></li>
      <li><a href="#">车辆交付问题 </a></li>
      <li><a href="#">贻误申请执行期限损失 </a></li>
      <li><a href="#">民警特权扣车,油变成 </a></li>
      <li><a href="#">地下室及公摊面积不收 </a></li>
      <li><a href="#">当前医疗广告存在的问 </a></li>
      <li><a href="#">新医改要注意的几个问 </a></li>
    </ul>
  </div>
  <h3 onclick="go_to(5);">选择五</h3>
  <div>
    <ul>
      <li><a href="#">5555555555555555 </a></li>
      <li><a href="#">从人大代表侯建军终审 </a></li>
      <li><a href="#">车辆交付问题 </a></li>
      <li><a href="#">贻误申请执行期限损失 </a></li>
      <li><a href="#">民警特权扣车,油变成 </a></li>
      <li><a href="#">地下室及公摊面积不收 </a></li>
      <li><a href="#">当前医疗广告存在的问 </a></li>
      <li><a href="#">新医改要注意的几个问 </a></li>
      <li><a href="#">张钰和于连的同源悲剧 </a></li>
      <li><a href="#">从人大代表侯建军终审 </a></li>
      <li><a href="#">车辆交付问题 </a></li>
      <li><a href="#">贻误申请执行期限损失 </a></li>
      <li><a href="#">民警特权扣车,油变成 </a></li>
      <li><a href="#">地下室及公摊面积不收 </a></li>
      <li><a href="#">当前医疗广告存在的问 </a></li>
      <li><a href="#">新医改要注意的几个问 </a></li>
    </ul>
  </div>
  <script type="text/javascript">
 <!--
 var h=document.getElementById("tab").getElementsByTagName("h3");
 var d=document.getElementById("tab").getElementsByTagName("div");
 function go_to(ao){
  for(var i=0;i<h.length;i++){
   if(ao-1==i){
   h[i].className+=" up";
   d[i].className+=" block";
   }
   else {
   h[i].className=" ";
   d[i].className=" ";
   }
  }
 }
 //-->
 </script>
</div>
</body>
</html>

Div+CSS+JQuery轻松实现选项卡"选项卡"

body,div,ul{ padding:0; margin:0;}         #container{width:800px; margin:50px;}         .tab{ pad...
  • lyr1985
  • lyr1985
  • 2015年07月23日 10:36
  • 1359

仿京东商品搜索选项卡弹窗

模仿京东选项卡
  • xiogjie_67
  • xiogjie_67
  • 2016年11月10日 19:18
  • 660

简单是选项卡切换效果~

效果图:代码:
  • kakaxiD
  • kakaxiD
  • 2016年05月09日 14:17
  • 1228

TAB选项卡效果(DIV+CSS )

New Document ul { margin:0; padding:0; list-style-type:none; vheight:24px; } ul li { float:left; d...
  • prufeng
  • prufeng
  • 2009年05月31日 14:28
  • 3179

网站开发之DIV+CSS简单布局网站入门篇(五)

这篇文章主要介绍如何使用DIV和CSS简单布局一个网站的首页,通常将网站划分为顶部(Logo、导航条)、中部(页面主要内容、左右栏目)、底部(制作方介绍、超链接)。这是非常基础的一篇引入性文章,采用案...
  • Eastmount
  • Eastmount
  • 2016年11月08日 12:05
  • 4499

史上最简单的JQ选项卡

选项卡,自动选项卡,JQ选项卡,JQ自动选项卡,选项卡插件
  • xyphf
  • xyphf
  • 2016年07月11日 13:01
  • 2516

[原创+源码]超强:基于PHP+jQuery实现仿163邮箱的站内邮件系统一

 [原创+源码]超强:基于PHP+jQuery实现仿163邮箱的站内邮件系统 (一)连载中,连载的目的是为了给大家解释一部分源码的作用,最后我会把源代码给大家的      这几天因为工作比较忙,本来计...
  • liwei3gjob
  • liwei3gjob
  • 2011年04月16日 22:17
  • 2696

Android实现仿网易首页选项卡动态滑动效果

版权声明:本文为博主原创文章,未经博主允许不得转载。 本文会实现一个类似网易新闻(不说网易新闻大家可能不知道大概是什么样子)点击超多选项卡,选项卡动态滑动的效果。  首先来看看布局...
  • zbh_1042354552
  • zbh_1042354552
  • 2016年07月20日 14:16
  • 1365

仿网易多附件上传功能

由于无法找到该文章的原创作者,在此无法注明出处,请作者见谅.如有问题或侵害到您的利益,请与我联系.限IE浏览器。Add Filesa.addfile {background-image:url(htt...
  • sunyujia
  • sunyujia
  • 2008年06月15日 12:16
  • 3680

纯JS实现的简单tab选项卡切换效果

本人在上一篇文章也写了用JS来实现tab选项卡切换效果,但是上次的那个代码比较复杂,这次是简化版的。 Tab效果 ul{ list-style: none; } *{...
  • Handsome_fan
  • Handsome_fan
  • 2017年04月22日 16:25
  • 1586
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:div+css仿163选项卡的简单版
举报原因:
原因补充:

(最多只允许输入30个字)