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 判断 object 的特定类转载
Feb 01 Javascript
JavaScript的eval JSON object问题
Nov 15 Javascript
jQuery简单设置文本框回车事件的方法
Aug 01 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
js中数组的常用方法小结
Dec 30 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
Vue filter介绍及其使用详解
Oct 21 Javascript
一文搞懂ES6中的Map和Set
May 20 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
JavaScript利用键盘码控制div移动
Mar 19 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
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
oracle资料库函式库
2006/10/09 PHP
一道求$b相对于$a的相对路径的php代码
2010/08/08 PHP
php采集文章中的图片获取替换到本地(实现代码)
2013/07/08 PHP
php获取apk包信息的方法
2014/08/15 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
vue使用echarts图表的详细方法
2018/10/22 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
前端性能优化建议
2020/09/17 Javascript
windows下安装python paramiko模块的代码
2013/02/10 Python
linux系统使用python监测网络接口获取网络的输入输出
2014/01/15 Python
Python人脸识别初探
2017/12/21 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
Django REST framework 视图和路由详解
2019/07/19 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
pygame实现非图片按钮效果
2019/10/29 Python
opencv python如何实现图像二值化
2020/02/03 Python
java字符串格式化输出实例讲解
2021/01/06 Python
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
const和static readonly区别
2013/05/20 面试题
个人违纪检讨书
2014/09/15 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
小学教师教学反思
2016/02/24 职场文书
2016年劳模先进事迹材料
2016/02/25 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python
python 爬取华为应用市场评论
2021/05/29 Python
详细了解MVC+proxy
2021/07/09 Java/Android