简单实现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中的apply()方法和call()方法使用介绍
Jul 25 Javascript
jQuery客户端分页实例代码
Nov 18 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
React-router4路由监听的实现
Aug 07 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
JAVA面试题 static关键字详解
Jul 16 Javascript
nuxt静态部署打包相对路径操作
Nov 06 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
php中的时间处理
2006/10/09 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
php测试kafka项目示例
2020/02/06 PHP
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
JS 表单验证大全
2011/11/23 Javascript
JavaScript取得鼠标绝对位置程序代码介绍
2012/09/16 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
2012/12/12 Javascript
JS事件在IE与FF中的区别详细解析
2013/11/20 Javascript
超级好用的jQuery圆角插件 Corner速成
2014/08/31 Javascript
JavaScript中创建对象的模式汇总
2016/04/19 Javascript
js基于cookie记录来宾姓名的方法
2016/07/19 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
2020/07/13 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
python基础教程之面向对象的一些概念
2014/08/29 Python
浅谈python多线程和队列管理shell程序
2015/08/04 Python
深入浅析python定时杀进程
2016/06/06 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
python生成器与迭代器详解
2019/01/01 Python
自学python的建议和周期预算
2019/01/30 Python
python+django+rest框架配置创建方法
2019/08/31 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
linux面试题参考答案(7)
2012/10/29 面试题
个人能力自我鉴赏
2014/01/25 职场文书
副处级干部考察材料
2014/05/17 职场文书
辩论赛开场白大全(主持人+辩手)
2015/05/29 职场文书