原生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简化JavaScript开发分析
Feb 19 Javascript
Javascript 圆角div的实现代码
Oct 15 Javascript
基于jQuery的表格操作插件
Apr 22 Javascript
jquery插件开发方法(初学者)
Feb 03 Javascript
JS 获取select(多选下拉)中所选值的示例代码
Aug 02 Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 Javascript
JavaScript获取各大浏览器信息图示
Nov 20 Javascript
Jquery实现上下移动和排序代码
Oct 17 Javascript
AngularJS实现表单验证功能详解
Oct 12 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 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 中执行系统外部命令
2006/10/09 PHP
PHP获取网站域名和地址的代码
2008/08/17 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
详解JavaScript的AngularJS框架中的表达式与指令
2016/03/05 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
JavaScript实现拖拽和缩放效果
2020/08/24 Javascript
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
python实现beta分布概率密度函数的方法
2019/07/08 Python
python 实现识别图片上的数字
2019/07/30 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
详解Python IO口多路复用
2020/06/17 Python
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
小班重阳节活动方案
2014/02/08 职场文书
社区网格化管理实施方案
2014/03/21 职场文书
小学二年级学生评语
2014/04/21 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
入党函调证明材料
2015/06/19 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书