原生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 相关文章推荐
JS解决ie6下png透明的方法实例
Aug 02 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
js学习笔记之事件处理模型
Oct 31 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
jQuery获取随机颜色的实例代码
May 21 jQuery
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
js验证账户名是否重复
May 26 Javascript
nuxt 每个页面head标签内容设置方式
Nov 05 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
Email+URL的判断和自动转换函数
2006/10/09 PHP
How do I change MySQL timezone?
2008/03/26 PHP
PHP模板解析类实例
2015/07/09 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
小程序实现留言板
2018/11/02 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
NodeJs操作MongoDB教程之分页功能以及常见问题
2019/04/09 NodeJs
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
[02:40]DOTA2殁境神蚀者 英雄基础教程
2013/11/26 DOTA
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
python实现C4.5决策树算法
2018/08/29 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
学习心得体会
2014/01/01 职场文书
一个大学生十年的职业规划
2014/01/17 职场文书
美术教师自我鉴定
2014/02/12 职场文书
树转促学习心得体会
2014/09/10 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
送给小学生的暑假礼物!小学生必背99首古诗
2019/07/02 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
详解如何用Python实现感知器算法
2021/06/18 Python
MySQL插入数据与查询数据
2022/03/25 MySQL
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL
centos7安装mysql5.7经验记录
2022/05/02 Servers