JS+DIV+CSS排版布局实现美观的选项卡效果


Posted in Javascript onOctober 10, 2015

本文实例讲述了JS+DIV+CSS排版布局实现美观的选项卡效果。分享给大家供大家参考。具体如下:

这是一个基于JavaScript的简单选项卡代码,陪新手练习一下Div+CSS排版的技巧,本选项卡可以继续美化修饰完善,选项卡在目前在众多网站上应用广泛,确实是一个很不错的网页布局方法。

运行效果截图如下:

JS+DIV+CSS排版布局实现美观的选项卡效果

在线演示地址如下:

具体代码如下:

<!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/html; charset=gb2312" />
<title>DIV CSS排版</title>
<style type="text/css"> 
<!--
body,ul{margin:0; padding:0; list-style:none; font:12px "宋体";}
.test {
 width:500px; 
 margin:20px auto; 
 height:150px;
 background:url("images/9zrgo3.jpg") repeat-x 0 33px; 
 }
.test ul li { 
 float:left; 
 padding:2px 1px 6px 1px; 
 background: url("images/11abdrs.jpg") no-repeat 0 0; 
 }
.test ul li a {
 color:#000;
 width:95px; 
 text-decoration:none; 
 display:block; 
 height:27px;
 line-height:31px;
 text-align:center;
 overflow:hidden;
 }
.test ul li a:hover{
 color:#30F;
 background:#FFF url("images/2vi1df8.jpg") repeat-x 0 0px; 
 }
.test ul li.yes {padding:0;border:none;}
.test ul li.yes a {
 color:#30F;
 width:112px;
 height:35px;
 line-height:40px;
 display:block;
 font-weight:bold;
 margin-bottom:-5px;
 background: url("images/27zgcqc.jpg") no-repeat 0px 0; 
 overflow:hidden;
 } 
.content {
 line-height:50px;
 text-align:center;
 font-size:20px;
 color:red;
 height:112px;
 border:#F8BE05 2px solid; 
 border-top:none; 
 clear:both;
 background:#ECED78;
 }
.no { display:none;}
-->
</style>
<script type="text/javascript" language="javascript"> 
 function test_item(n){
  var menu = document.getElementById("menu");
  var menuli = menu.getElementsByTagName("li");
  for(var i = 0; i< menuli.length;i++){
   menuli[i].className= "";
   menuli[n].className="yes";
   document.getElementById("test"+ i).className = "no";
   document.getElementById("test"+ n).className = "content";
  }
 }
</script>
</head>
<body>
<div class="test">
 <ul id="menu">
  <li class="yes" onclick="javascript:test_item(0);"><a href="#" onfocus="this.blur()">首页</a></li>
  <li onclick="javascript:test_item(1);"><a href="#" onfocus="this.blur()">连接一</a></li>
  <li onclick="javascript:test_item(2);"><a href="#" onfocus="this.blur()">连接二</a></li>
  <li onclick="javascript:test_item(3);"><a href="#" onfocus="this.blur()">连接三</a></li>
  <li onclick="javascript:test_item(4);"><a href="#" onfocus="this.blur()">连接四</a></li>
 </ul>
 <div class="content" id="test0">
  首页内容
 </div>
 <div id="test1" class="no">
  连接一内容
 </div>
 <div id="test2" class="no">
  连接二内容
 </div>
 <div id="test3" class="no">
  连接三内容
 </div>
 <div id="test4" class="no">
  连接四内容
 </div>
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
JQuery的ajax基础上的超强GridView展示
Sep 18 Javascript
javascript数组遍历for与for in区别详解
Dec 04 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
浅析如何利用angular结合translate为项目实现国际化
Dec 08 Javascript
vue计算属性和监听器实例解析
May 10 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
一文搞懂ES6中的Map和Set
May 20 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
Node.js使用MongoDB的ObjectId作为查询条件的方法
Sep 10 Javascript
原生js+canvas实现下雪效果
Aug 02 Javascript
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
Oct 10 #Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 #Javascript
表单验证插件Validation应用的实例讲解
Oct 10 #Javascript
JS实现的车标图片提示效果代码
Oct 10 #Javascript
jqTransform美化表单
Oct 10 #Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 #Javascript
页面内容排序插件jSort使用方法
Oct 10 #Javascript
You might like
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
php写入、删除与复制文件的方法
2015/06/20 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
用js遍历 table的脚本
2008/07/23 Javascript
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
基于jquery的多功能软键盘插件
2012/07/25 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
2015/08/03 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
微信小程序传值以及获取值方法的详解
2019/04/29 Javascript
JS实现放烟花效果
2020/03/10 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
python爬虫爬取某站上海租房图片
2018/02/04 Python
python统计字母、空格、数字等字符个数的实例
2018/06/29 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
python 在屏幕上逐字显示一行字的实例
2018/12/24 Python
Python zip函数打包元素实例解析
2019/12/11 Python
python如何实现单链表的反转
2020/02/10 Python
python打开音乐文件的实例方法
2020/07/21 Python
大整数数相乘的问题
2012/07/22 面试题
《美丽的彩虹》教学反思
2014/02/25 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
霸气押韵的班级口号
2014/06/09 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
小学教师求职信范文
2015/03/20 职场文书
入学证明
2015/06/23 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
用Python提取PDF表格的方法
2021/04/11 Python
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python