简单实现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>

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

时间: 2017-02-07

原生js实现tab选项卡切换

本文实例为大家分享了原生js实现tab选项卡切换效果的代码,供大家参考,具体内容如下 1.html部分  <body> <div id="tab"> <div class="tab_menu"> <ul> <li class="selected"><a href="#">时事</a></li> <li><a hre

原生js实现选项卡功能

效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>原生js选项卡写法</title> <style> #div1 div{width: 200px;height: 200px;border: 1px solid #FF0000;display: none;} .active{background: red;} &

javascript实现tabs选项卡切换效果(自写原生js)

现在的页面上有许多各种各样的页面效果,常用的有弹出层效果,无缝滚动效果,选项卡切换效果.今天分享一款自己用原生javascript写的选项卡切换效果,由于本人水平有限,如有问题请指出. 效果图如下:  html代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</

Vue.js组件tabs实现选项卡切换效果

今天给大家分享一个小颖自己写的vue组件,因为小颖也才接触vue没多久,如果有什么不足的地方,希望大家提出来,小颖加以改正.以下就是具体如何实现tabs啦. 调用示例: <template> <div class="tabs-contents"> <!-- 调用tabs组件 --> <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'> <di

js实现tab选项卡函数代码

* { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; font-size: 12px; padding-top: 0px; } BODY { padding-left: 20px; padding-top: 20px; } .wid240 { width: 242px; margin-bottom: 20px; } .wid180 { width: 182px; } .tab { border-b

结构/表现/行为完全分离的选项卡(jquery版和原生JS版)

关于思路,和常规选项卡思路一样.点击选项菜单,突出显示,并显示对应的选项.本文实例中主要是通过判断点击菜单在菜单列表中的索引位置来显示或隐藏选项区.原生js还有很多种实现方法(蓝色理想中搜索),为了与jQ版思路保持一致,本文实例用的是循环判断. 详见注释. 另有几点说明: 1. 通过本文DEMO演示,可以很明显的看到原生JS的window.onload=function(){-}与jQuery的$(document).ready(function(){-});的区别,这也是我为什么不用样式定义初

js-tab选项卡

说道tab选项卡,顾名思义,就是切换不同内容分类,想必学过前端的都知道,tab有很多方法可以实现,最近刚跟师傅学了一种,感觉很简便,很实用哦. 一.先看一下结果 二.可以根据图来布局,首先上面标签和下面内容, 需要注意的是点击上面a标签的链接和下面div的id一一对应起来, 三.就是最重要的js部分了. 这个地方可以分几个阶段去思考 1.首先得有事件去触发点击 2.获取与内容对应a标签的href,这样就可以对下面进行显示或隐藏, 3.通过唯一的class  -->  active   来切换你想

原生js和jQuery写的网页选项卡特效对比

总的来说思路比较简单,就是先获取节点,然后对节点进行相应的处理,下面是完整的页面代码: 原生js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>原生js tab</tit

JS实现的tab切换选项卡效果示例

本文实例讲述了JS实现的tab切换选项卡效果.分享给大家供大家参考,具体如下: <script type="text/javascript"> /* tab切换选项卡js效果 writed by *** 2010.08.13 1.currentid:string 当前被激活菜单的id; 2.otherids:Array() 其它未被激活的id; 3.tabclasses:Array() tab被激活时的样式类+tab未被激活时的样式类,存储两个值即可 */ function

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

本文实例讲述了js实现简单的可切换选项卡效果的方法.分享给大家供大家参考.具体如下: 如图,最简单的纯粹的选项卡 第一步,当然是先写html代码和css样式 <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>无标题文档</title> <style> body,ul,li{margin:0; padding:0; font:12

JS实现简单的tab切换选项卡效果

本文实例讲述了JS实现简单的tab切换选项卡效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <m

基于JS实现简单的样式切换效果代码

本文实例讲述了基于JS实现简单的样式切换效果.分享给大家供大家参考.具体如下: 这是一款基于JS实现简单的样式切换代码,自由切换CSS样式,很多大网站现在正在用,我觉得这是个挺实用的不错的功能,希望大家喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-tab-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果

本文实例讲述了js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果.分享给大家供大家参考.具体如下: 这是一款可在同一页面中多次调用的TAB选项卡代码,仿百度风云榜的TAB切换效果,用到了几张修饰图片,请顺着代码下载所需的图片,然后上传到你的网站中,修改代码内的路径就可以用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-baidu-style-tab-cha-codes/ 具体代码如下: <!DOCTYPE html PUBL

js+css简单实现网页换肤效果

本文实例讲述了js+css简单实现网页换肤效果.分享给大家供大家参考,具体如下: 这里做了3套外观,分别使用不同文件夹下的同名css文件,那么怎样实现js替换加载呢? 3个按钮如下: <a id="skin1" href="javascript:void(0)" class="easyui-linkbutton" onclick="changeCss('default')">蓝色皮肤</a><br

JS+CSS实现的经典tab选项卡效果代码

本文实例讲述了JS+CSS实现的经典tab选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款经典的JavaScript+CSS tab选项卡代码,由以前的一款改写而成,自认为不错的东西,发上来分享吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-tab-cha-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio

JS+CSS实现仿msn风格选项卡效果代码

本文实例讲述了JS+CSS实现仿msn风格选项卡效果代码.分享给大家供大家参考,具体如下: 这是一款来自MSN网站的选项卡,清新淡蓝色风格,新闻类.资讯类.文章类网站都比较适合使用,代码扩展性高,W3C标准设计,兼容IE.火狐等多种浏览器,整体效果非常不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-f-msn-style-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/

JS+CSS实现的蓝色table选项卡效果

本文实例讲述了JS+CSS实现的蓝色table选项卡效果.分享给大家供大家参考.具体如下: 这是一款蓝色的JS+Table类型的选项卡,部分标签内容存储在JS数组,个人感觉本特效不是太合理,因为内容从Js里输出会给读取内容造成很大麻烦,这里你就当学习一种JS编程方法,代码是需要改进的. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-blue-table-style-nav-demo/ 具体代码如下: <html> <h

JS实现的最简Table选项卡效果

本文实例讲述了JS实现的最简Table选项卡效果.分享给大家供大家参考.具体如下: 这是一款最简易的Table选项卡,是基于Table表格的,非DIV结构,习惯表格的朋友可能会喜欢本选项卡,部分修饰仍然用的是Table,比如表格边框.背景颜色等,个人感觉好像用Table比用DIV结构代码更精简一些. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-z-simple-tab-nav-menu-codes/ 具体代码如下: <html> &l