简单实现js选项卡切换效果


Posted in Javascript onFebruary 09, 2017

本文实例为大家分享了js选项卡切换效果的具体代码,供大家参考,具体内容如下

实现思路:

1、首先获取id元素。
2、for循环历遍按钮元素添加onclick事件。
3、排他思想,点击按钮时设置所有选项卡按钮样式为空,利用this关键字指定当前选项卡获得高亮样式。
4、下面的多个div内容块以此类推。

源代码:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>简单的选项卡切换(仿Hao123导航)</title>
</head>
<style>
 * {
  margin: 0;
  padding: 0;
 }
 .box {
  width: 278px;
  margin: 0 auto;
  margin-top: 100px;
  background-color: #F7F7F8;
  overflow: hidden;
 }
 .btn button {
  outline:none;
  color: #616161;
  font:14px/100% arial,"Hiragino Sans GB","Hiragino Sans GB W3",\5b8b\4f53;
  border: none;
  height: 34px;
  width: 51px;
  background-color: #F7F7F8;
  float: left;
  cursor: pointer;
 }
 .box .btn i {
  height: 16px;
  border-left: 1px solid #EAEAEA;
  margin-top: 9px;
  float: left;
  _font-size: 0px;
 }
 .box .btn button:hover {
  color: #0AA770;
 }
 .box .btn s {
  cursor: pointer;
  text-decoration: none;
  font:14px/34px arial,"Hiragino Sans GB","Hiragino Sans GB W3",\5b8b\4f53;
 }
 #box1 #btns .clickbtn {
  border-top: 1px solid #0AA770;
  color: #0AA770;
 }
 .bottom {
  display: none;
  position: absolute;
  width: 278px;
  height: 110px;
  color: #fff;
  text-align: center;
  font:14px/100% arial,"Hiragino Sans GB","Hiragino Sans GB W3",\5b8b\4f53;
 }
 .bottom a {
  color: #fff;
  position: relative;
  top: -20px;
  left: 0px;
  text-decoration: none;
 }
 .bottom a:hover {
  text-decoration: underline;
 }
</style>
<script>
 window.onload = function(){
  var btns = document.getElementById("btns").getElementsByTagName("button");
  var divs = document.getElementById("bottomdivs").getElementsByTagName("div");
  btns[0].className = "clickbtn";
   for(var i = 0;i<btns.length;i++){
    btns[i].index = i;
    btns[i].onclick = function(){
     //alert(this.index);
     for(var j = 0;j<btns.length;j++){
      btns[j].className = "";
     }
     this.className = "clickbtn";
     for(var b = 0;b<btns.length;b++){
      divs[b].style.display = "none";
     }
     divs[this.index].style.display = "block";

    }
  }
 }
</script>
<body>
<div class="box" id="box1">
 <div class="btn" id="btns">
  <button>推介</button>
  <i></i>
  <button>社会</button>
  <i></i>
  <button>娱乐</button>
  <i></i>
  <button>军事</button>
  <i></i>
  <button>体育</button>
  <s>+</s>
 </div>
 <div id="bottomdivs">
  <div class="bottom" style="display: block">
   <img src="images/01.jpg" alt="">
   <h4><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >小伙直播时遭遇“闹鬼”事件 全过程被拍下</a></h4>
  </div>
  <div class="bottom">
   <img src="images/02.jpg" alt="">
   <h4><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >男子穿新郎装背充气娃娃游街</a></h4>
  </div>
  <div class="bottom">
   <img src="images/03.jpg" alt="">
   <h4><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >她满足所有人对才女的幻想</a></h4>
  </div>
  <div class="bottom">
   <img src="images/04.jpg" alt="">
   <h4><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >王毅回应中美是否会在南海发生冲突</a></h4>
  </div>
  <div class="bottom">
   <img src="images/05.jpg" alt="">
   <h4><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >刘翔与娇妻秀恩爱 豪车曝光车牌太抢眼</a></h4>
  </div>
 </div>
</div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中的=等号个数问题两个跟三个有什么区别
Oct 23 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
JS中对数组元素进行增删改移的方法总结
Dec 15 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
通过图带你深入了解vue的响应式原理
Jun 21 Javascript
javascript中的闭包概念与用法实践分析
Jul 26 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
vue中div禁止点击事件的实现
Apr 02 Vue.js
原生JS轮播图插件
Feb 09 #Javascript
jQuery页面弹出框实现文件上传
Feb 09 #Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 #Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 #Javascript
vue-router跳转页面的方法
Feb 09 #Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 #Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 #Javascript
You might like
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
php实现图片缩略图的方法
2016/03/29 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
jqGrid用法汇总(全经典)
2016/06/28 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
2017/08/15 jQuery
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
[53:49]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
在Python的Tornado框架中实现简单的在线代理的教程
2015/05/02 Python
python列表操作之extend和append的区别实例分析
2015/07/28 Python
TensorFlow实现RNN循环神经网络
2018/02/28 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
使用Python三角函数公式计算三角形的夹角案例
2020/04/15 Python
Python中的Cookie模块如何使用
2020/06/04 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
文明演讲稿范文
2014/05/12 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
普通话演讲稿
2014/09/03 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
您对思维方式了解多少?
2019/12/09 职场文书