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 相关文章推荐
2010年最佳jQuery插件整理
Dec 06 Javascript
javascript 事件处理程序介绍
Jun 27 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
基于Bootstrap table组件实现多层表头的实例代码
Sep 07 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
Vue实现附件上传功能
May 28 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 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
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
laravel5使用freetds连接sql server的方法
2018/12/07 PHP
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
2011/12/12 Javascript
jQuery函数的等价原生函数代码示例
2013/05/27 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
jquery实现简单的遮罩层
2016/01/08 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
ES6中的Promise代码详解
2017/10/09 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
详解如何在Vue里建立长按指令
2018/08/20 Javascript
关于自定义Egg.js的请求级别日志详解
2018/12/12 Javascript
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python随机生成带特殊字符的密码
2016/03/02 Python
Python文本处理之按行处理大文件的方法
2018/04/09 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
企业办公室主任岗位职责
2014/02/19 职场文书
小班上学期评语
2014/05/05 职场文书
作风建设年度心得体会
2014/10/29 职场文书
文明班级申报材料
2014/12/24 职场文书
工作经验交流材料
2014/12/30 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python
httpclient调用远程接口的方法
2022/08/14 Java/Android