简单实现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 相关文章推荐
学习JS面向对象成果 借国庆发布个最新作品与大家交流
Oct 03 Javascript
jquery创建并行对象或者合并对象的实现代码
Oct 10 Javascript
js数组依据下标删除元素
Apr 14 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
js实现正则匹配中文标点符号的方法
Dec 23 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
JS实现的简单拖拽功能示例
Mar 13 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 Javascript
webpack常用配置总览(小结)
Nov 18 Javascript
uni-app如何页面传参数的几种方法总结
Apr 28 Javascript
原生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
TMDPHP 模板引擎使用教程
2012/03/13 PHP
PHP变量赋值、代入给JavaScript中的变量
2015/06/29 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
游戏人文件夹程序 ver 4.03
2006/07/14 Javascript
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
浅谈Angular 观察者模式理解
2018/11/01 Javascript
Vue实现移动端左右滑动效果的方法
2018/11/27 Javascript
vue-router beforeEach跳转路由验证用户登录状态
2018/12/26 Javascript
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
对python实时得到鼠标位置的示例讲解
2018/10/14 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
对python判断是否回文数的实例详解
2019/02/08 Python
Django之form组件自动校验数据实现
2020/01/14 Python
匡威英国官网:Converse英国
2018/12/02 全球购物
机电一体化应届生求职信范文
2014/01/24 职场文书
个性发展自我评价
2014/02/11 职场文书
小学生读书感言
2014/02/12 职场文书
平安工地建设方案
2014/05/06 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
孔庙导游词
2015/02/04 职场文书
写给同事的离职感言
2015/08/04 职场文书
《迟到》教学反思
2016/02/24 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书