原生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 相关文章推荐
Javascript继承机制的设计思想分享
Aug 28 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 Javascript
Vue2.0用户权限控制解决方案的示例
Feb 10 Javascript
深入浅析Vue.js计算属性和侦听器
May 05 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 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
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
PHP分多步骤填写发布信息的简单方法实例代码
2012/09/23 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
2016/03/30 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
js实现微信聊天效果
2020/08/09 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
python在linux中输出带颜色的文字的方法
2014/06/19 Python
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
python导入坐标点的具体操作
2019/05/10 Python
python ChainMap的使用和说明详解
2019/06/11 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
Python数据正态性检验实现过程
2020/04/18 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
python 字符串格式化的示例
2020/09/21 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
群众路线批评与自我批评
2014/02/06 职场文书
应届毕业生应聘自荐信范文
2014/02/26 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
单位婚育证明范本
2014/11/21 职场文书
vue3引入highlight.js进行代码高亮的方法实例
2022/04/08 Vue.js