原生js和jQuery写的网页选项卡特效对比


Posted in Javascript onApril 27, 2015

总的来说思路比较简单,就是先获取节点,然后对节点进行相应的处理,下面是完整的页面代码:

原生js:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>原生js tab</title>
<style type="text/css">
.tab{
  margin:10px auto;
  position:relative;
  width:300px;
}
ul,li{
  list-style-type:none;
  padding:0;
  margin:0;
  font:13px/20px SimSun,arial;
  color:#333;
  text-align:center;
}
.tabTltle ul li{
 float:left;
 position:relative;
 background:#fefefe;
 background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));
 padding:7px 15px;
 border:1px #ddd solid;
 margin-right:-1px;
 cursor:pointer;

}
.tabTltle ul li.active{
  background:#fff;
  font-weight: bold;
}
.clearfix{
}
.clearfix:after{
  display:block;
  clear:both;
  overflow:hidden;
  content:"";
}
.tabConn{
  border:1px #eee solid;
  position:relative;
  height:100px
}
.tabConn div{
  position:absolute;
  opacity:0;
  filter:alpha(opacity=0);
  padding:5px;
  text-align:center;
  width:100%;
}
.tabConn div.current{
  opacity:1;
  filter:alpha(opacity=100);
}
</style>
</head>
<body>
  <div id="tab" class="tab">
    <div class="tabTltle">
      <ul class="clearfix">
        <li class="active">标题一</li>
        <li>标题二</li>
        <li>标题三</li>
        <li>标题四</li>
      </ul>
    </div>
    <div class="tabConn">
      <div class="current">aaaaaaaaaaaaaaa</div>
      <div>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
      <div>cccccccccccccccccccccccccccccccc</div>
      <div>ddddddddddddddddddddddddddddd</div>
    </div>
  </div>
<script type="text/javascript">
 (function(){
   var tab = document.getElementById("tab");
   var tabList = tab.getElementsByTagName("div")[0].getElementsByTagName("li");
   var tabConn = tab.getElementsByTagName("div")[1].getElementsByTagName("div");for(var i=0;i<tabList.length;i++){
    tabList[i].index = i;
    tabList[i].onclick = function(){
      showConn(this.index);
    }
  }
  function showConn(_index){
    var index = _index;for(var j=0;j<tabList.length;j++){
      tabList[j].className = "";
      tabConn[j].className = "";
      tabConn[j].style.opacity=0;
    }
    tabConn[index].className="current";
    tabList[index].className="active";
  }
 })();
</script>
</body>
</html>

下面我们来看一下jQuery写的(css共用,需要引进jQuery库):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery tab</title>
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<style type="text/css">
.tab{
 margin:10px auto;
 position:relative;
 width:300px;
}
ul,li{
 list-style-type:none;
 padding:0;
 margin:0;
 font:13px/20px SimSun,arial;
 color:#333;
 text-align:center;
}
.tabTltle ul li{
 float:left;
 position:relative;
 background:#fefefe;
 background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));
 padding:7px 15px;
 border:1px #ddd solid;
 margin-right:-1px;
 cursor:pointer;

}
.tabTltle ul li.active{
 background:#fff;
 font-weight: bold;
}
.clearfix{
}
.clearfix:after{
 display:block;
 clear:both;
 overflow:hidden;
 content:"";
}
.tabConn{
 border:1px #eee solid;
 position:relative;
 height:100px
}
.tabConn div{
 position:absolute;
 opacity:0;
 filter:alpha(opacity=0);
 padding:5px;
 text-align:center;
 width:100%;
}
.tabConn div.current{
 opacity:1;
 filter:alpha(opacity=100);
}
</style>
</head>
<body>
<h3>jQuery写的选项卡:</h3>
 <div id="tab2" class="tab">
  <div class="tabTltle tab-title">
   <ul class="clearfix">
    <li class="active">标题一</li>
    <li>标题二</li>
    <li>标题三</li>
    <li>标题四</li>
   </ul>
  </div>
  <div class="tabConn tab-conn">
   <div class="current">aaaaaaaaaaaaaaa</div>
   <div>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
   <div>cccccccccccccccccccccccccccccccc</div>
   <div>ddddddddddddddddddddddddddddd</div>
  </div>
 </div>
<script type="text/javascript">
$(document).ready(function(){
 var $tabTitle = $('.tab-title').find('li');
 var $tabList = $('.tab-conn > div');
 $tabTitle.click(function(){
  $tabTitle.each(function(){
   $tabTitle.removeClass('active');
  });
  var index = $tabTitle.index(this);
  $(this).addClass('active'); 
  $tabList.eq(index).addClass('current').siblings().removeClass('current');
 });
});
</script>
</body>
</html>

是不是简单了好多!

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
May 18 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
Sep 29 Javascript
Web开发之JavaScript
Mar 29 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
Position属性之relative用法
Dec 14 Javascript
javascript拖拽应用实例(二)
Mar 25 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 Javascript
JavaScript闭包原理与用法学习笔记
May 29 Javascript
javascript实现淘宝幻灯片广告展示效果
Apr 27 #Javascript
jquery实现标签上移、下移、置顶
Apr 26 #Javascript
jquery ui resize 中border-box的bug修正
Apr 26 #Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
Apr 26 #Javascript
jquery获取节点名称
Apr 26 #Javascript
jQuery实现鼠标经过提示信息的地图热点效果
Apr 26 #Javascript
jquery插件qrcode在线生成二维码
Apr 26 #Javascript
You might like
地摊中国 - 珍藏老照片
2020/08/18 杂记
基于php缓存的详解
2013/05/15 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
推荐dojo学习笔记
2007/03/24 Javascript
prettify 代码高亮着色器google出品
2010/12/28 Javascript
基于javascript滚动图片具体实现
2013/11/18 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
Javascript函数的参数
2015/07/16 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
2017/10/15 jQuery
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
[03:40]DOTA2亚洲邀请赛小组赛第二日 赛事回顾
2015/01/31 DOTA
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
python利用beautifulSoup实现爬虫
2014/09/29 Python
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
物流管理专业毕业生自荐信
2014/03/04 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
天气温馨提示语
2015/07/14 职场文书
安全生产培训心得体会
2016/01/18 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
深度学习详解之初试机器学习
2021/04/14 Python