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 相关文章推荐
兼容多浏览器的字幕特效Marquee的通用js类
Jul 20 Javascript
JQuery 获取和设置Select选项的代码
Feb 07 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
javascipt基础内容--需要注意的细节
Apr 10 Javascript
利用jquery写的左右轮播图特效
Feb 12 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
Apr 20 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
jQuery UI仿淘宝搜索下拉列表功能
Jan 10 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
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
2012/04/11 Javascript
ExtJS中文乱码之GBK格式编码解决方案及代码
2013/01/20 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
jquery弹出框的用法示例(2)
2013/08/26 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
JavaScript中闭包的写法和作用详解
2016/06/29 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
Vue管理系统前端之组件拆分封装详解
2020/08/23 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
Python何时应该使用Lambda函数
2019/07/02 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
利用纯CSS3实现tab选项卡切换示例代码
2016/09/21 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
ORACLE第二个十问
2013/12/14 面试题
生物科学专业个人求职信范文
2013/12/05 职场文书
入党申请自荐书范文
2014/02/11 职场文书
《逃家小兔》教学反思
2014/02/23 职场文书
企业办公室岗位职责
2014/03/12 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
刮痧观后感
2015/06/05 职场文书