脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js选项卡切换效果

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

 更新时间：2017年02月09日 17:02:12   作者：Lland  
这篇文章主要为大家详细介绍了简单实现js选项卡切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片

    Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片

    这篇文章主要介绍了bootstrap的Carousel配合dropload.js实现移动端滑动切换图片,实现方法非常简单，具有参考借鉴价值，需要的朋友可以参考下
    2017-03-03
  • js实现tab栏切换制作

    js实现tab栏切换制作

    这篇文章主要为大家详细介绍了js实现tab栏切换制作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • javascript判断chrome浏览器的方法

    javascript判断chrome浏览器的方法

    这篇文章主要介绍了javascript判断chrome浏览器的方法，通过userAgent判断检测一下userAgent返回的字符串里面是否包含“Chrome”,需要的朋友可以参考下
    2014-03-03
  • javascript获取表格 td 中的内容

    javascript获取表格 td 中的内容

    可以获取html table中的td中的内容。非常的不错。
    2009-07-07
  • 浅析TypeScript 命名空间

    浅析TypeScript 命名空间

    命名空间一个最明确的目的就是解决重名问题。这篇文章主要介绍了TypeScript 命名空间的相关知识，本文通过实例详解给大家介绍的非常详细,需要的朋友可以参考下
    2020-03-03
  • uni-app动态修改主题色的方法详解

    uni-app动态修改主题色的方法详解

    最近在看uniapp开发app时需要实现动态修改主题色的功能,这篇文章主要给大家介绍了关于uni-app动态修改主题色的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • JSChart轻量级图形报表工具(内置函数中文参考)

    JSChart轻量级图形报表工具(内置函数中文参考)

    JSChart是一个轻量级的在线图表生成工具，本身十分小巧，简单易用，相对来讲功能也不是特别强大，但是对于一些要求不高的应用来讲已经够用了，最近两天在做一个监控系统，想到了它。
    2010-10-10
  • 使用非html5实现js板连连看游戏示例代码

    使用非html5实现js板连连看游戏示例代码

    连连看游戏通常情况下都是使用html5来实现的，不过从现在开始就可以使用js来实现了，具体的代码如下，喜欢的朋友可以参考下，希望对大家有所帮助
    2013-09-09
  • 自己做的模拟模态对话框实现代码

    自己做的模拟模态对话框实现代码

    最近做完一个项目，发现浏览器兼容问题，模态对话框只有IE支持，但是IE9又不能支持带框架的对话框，那个对话框的大小打死都设置不了，在网上查说因为好多功能被IE9屏蔽了，于是自己做了一个模拟对话框的东西
    2012-05-05
  • JavaScript逻辑运算符相关总结

    JavaScript逻辑运算符相关总结

    这篇文章主要介绍了JavaScript逻辑运算符的相关资料,帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下
    2020-09-09

最新评论