简单实现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 相关文章推荐
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 Javascript
js中哈希表的几种用法总结
Jan 28 Javascript
JavaScript函数详解
Feb 27 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
JS自定义混合Mixin函数示例
Nov 26 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
vue + elementUI实现省市县三级联动的方法示例
Oct 29 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 用数组降低程序的时间复杂度
2009/12/04 PHP
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
PHP获取访问页面HTTP状态码的实现代码
2016/11/03 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
jQuery插件开发基础简单介绍
2013/01/07 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
小程序中this.setData的使用和注意事项
2019/08/28 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
鸿蒙系统中的 JS 开发框架
2020/09/18 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
基于Python闭包及其作用域详解
2017/08/28 Python
python3中函数参数的四种简单用法
2018/07/09 Python
python如何求解两数的最大公约数
2018/09/27 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
python3对接mysql数据库实例详解
2019/04/30 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
Pytorch释放显存占用方式
2020/01/13 Python
appium+python adb常用命令分享
2020/03/06 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
广告学专业应届生求职信
2013/10/01 职场文书
校园自助餐厅的创业计划书
2013/12/26 职场文书
学校评语大全
2014/05/06 职场文书
质量月活动总结
2014/08/26 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
2015年司机工作总结
2015/04/23 职场文书
焦裕禄观后感
2015/06/03 职场文书
Elasticsearch 批量操作
2022/04/19 Python
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
2023/05/07 HTML / CSS