选项卡切换在做网页的时候经常会用到，以往都是用JQ来实现，代码简单易懂，今天用原生的js实现了一下，二者还是有很大不同的，可以对比一下代码来研究一下。
<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <script type="text/javascript" src="js/jquery.js"></script>

    <style>

     body{margin: 20px;padding: 0;}

     ul{list-style: none; margin: 0;padding: 0; height: auto; overflow: hidden;}

     li{float: left; border: 1px solid #333333; padding: 5px; margin-right: 5px; }

     .li_hover{background: #C87800;}

     .div_list{border: 1px solid #333; display: none; height: 300px; margin-top: 10px; background: #C87800; width: 300px;}

    </style>

    <script>

   /*js方法*/

    window.onload=function(){

        var li=document.getElementsByTagName("li");//获取li的集合

        var divlist=document.getElementsByClassName("div_list");//获取div_list 集合

        for(var i=0;i<li.length;i++){//循环

            li[i].index=i;//给li添加索引值

            li[i].onclick=function(){//li点击事件

                 for(var j=0;j<li.length;j++){//第二层for循环  初始化li 和div的值

                     li[j].className="";

                     divlist[j].style.display="none";

                 }

                this.className="li_hover";//给点击的li添加背景色

                divlist[this.index].style.display="block";//通过this.index显示对应的div

            }

        }

    }

    /*JQ方法*/

    /*

         $(function(){

             $("ul li").click(function(){

                 var li_index=$(this).index();//获取点击的li的索引

                 $("ul li").removeClass("li_hover");//清空所有li的样式

                 $(this).addClass("li_hover");//给当前点击的li添加背景样式

                 $(".div_list").css("display","none");//隐藏所有的 div

                 $(".div_list").eq(li_index).css("display","block");//显示对应索引的div

             })

         })*/

    </script>

</head>

<body>

<ul>

 <li class="li_hover">aaaa</li>

 <li>bbbb</li>

 <li>cccc</li>

</ul>

<div>

    <div class="div_list" style="display: block;">aaaaaaaaaaaaa</div>

    <div class="div_list">bbbbbbbbbbbbb</div>

    <div class="div_list">ccccccccccccc</div>

</div>

</body>

</html>

js和jquery实现简单的选项卡的更多相关文章

  1. [js插件开发教程]原生js仿jquery架构扩展开发选项卡插件

    jquery插件一般是这么干的: $.fn.插件名称 = function(){}, 把插件的名称加在.fn上,在源码里面实际上是扩展到构造函数的原型对象上,如果你没看过jquery的源代码,或者你曾 ...

  2. js和jQuery写简单下拉菜单

    1.jQuery写法 <head> <meta http-equiv="Content-Type" content="text/html; charse ...

  3. Jquery简单的选项卡实现

    概述 原来对jQuery用的不是很多,主要就是表单验证这些部分,最近想要更深入的学习jQuery和JavaScript编码,就找来了一些视频进行学习,然后就做了这个简单的选项卡示例.视频学习地址见最后 ...

  4. 使用jQuery.extend创建一个简单的选项卡插件

    选项卡样式如图,请忽略丑陋的样式,样式可以随意更改 主要是基于jquery的extend扩展出的一个简单的选项卡插件,注意:这里封装的类使用的是es6中的class,所以不兼容ie8等低版本浏览器呦! ...

  5. 三行Jquery代码实现简单的选项卡

    今晚,我们来用实现一个简单的选项卡切换代码,主要代码只有两行. 效果: 思路:通过切换JQuery控制div的显隐和样式的改变 其中那个一个div显示,其余全隐藏 实现: <!DOCTYPE h ...

  6. JS入门学习，写一个简单的选项卡

    /* 经过昨天一整天的纠结和摸索.总结下学习初期我最致命的几个问题…… 1.var oDiv = document.getElementById('');    一定要多输,熟悉后o u什么的字母别搞 ...

  7. JS去掉首尾空格 简单方法大全(原生正则jquery)

    JS去掉首尾空格 简单方法大全 var osfipin= ' http://www.cnblogs.com/osfipin/ '; //去除首尾空格 osfipin.replace(/(^\s*)|( ...

  8. 原生js、jQuery实现选项卡功能

    在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图:              好了,下边 ...

  9. 基于jQuery UI的tabs选项卡美化

    很多朋友对JS望而生畏,但听很多朋友说jQuery很简单,因此开始使用jQuery,使用之后发现,只会写简单的功能,复杂的功能还是不太会写或者总是担心自己写的有性能问题,对前端人员来说只能通过不断学习 ...

随机推荐

  1. ASP.NET Aries 入门开发教程5：自定义列表页工具栏区

    前言: 抓紧时间,继续写教程,因为发现用户期待的内容,都在业务处理那一块. 不得不继续勤劳了. 这节主要介绍工具栏区的玩法. 工具栏的默认介绍: 工具栏默认包括5个按钮,根据不同的权限决定显示: 添加 ...

  2. 在一个空ASP.NET Web项目上创建一个ASP.NET Web API 2.0应用

    由于ASP.NET Web API具有与ASP.NET MVC类似的编程方式,再加上目前市面上专门介绍ASP.NET Web API 的书籍少之又少(我们看到的相关内容往往是某本介绍ASP.NET M ...

  3. Linux CentOS 配置JDK环境

    一.下载JDK 下载JDK的方式有两种: 1.Linux中使用wget下载 1.使用命令安装wget yum install wget 2.下载 wget 'http://download.oracl ...

  4. ASP.NET Core的路由[2]：路由系统的核心对象——Router

    ASP.NET Core应用中的路由机制实现在RouterMiddleware中间件中,它的目的在于通过路由解析为请求找到一个匹配的处理器,同时将请求携带的数据以路由参数的形式解析出来供后续请求处理流 ...

  5. jQuery学习之路（3）- 事件

    ▓▓▓▓▓▓ 大致介绍 jQuery增加了并扩展了基本的事件处理机制,不但提供了更加优雅的事件处理语法,而且极大地增强了事件处理能力 ▓▓▓▓▓▓ jQuery中的事件 ▓▓▓▓▓▓ 加载DOM 在j ...

  6. submit text3常用快捷键

    在网上找了一些submit text的快捷键: Ctrl+D 选词 (反复按快捷键,即可继续向下同时选中下一个相同的文本进行同时编辑)Ctrl+G 跳转到相应的行Ctrl+J 合并行(已选择需要合并的 ...

  7. spring源码分析之freemarker整合

    FreeMarker是一款模板引擎: 即一种基于模板和要改变的数据, 并用来生成输出文本(HTML网页.电子邮件.配置文件.源代码等)的通用工具. 它不是面向最终用户的,而是一个Java类库,是一款程 ...

  8. BPM配置故事之案例11-操作外部数据源

    小明:可以获取ERP数据了-- 老李:哦,这么快?小伙子,我非常看好你,来来,别急着走,再陪我聊会-- 小明:--您老人家不是又要改流程吧? 老李:没有没有,哎嘿嘿嘿,我们这不都是为公司效率着想嘛,这 ...

  9. React Native 之 Text的使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  10. Android Weekly Notes Issue #234

    Android Weekly Issue #234 December 4th, 2016 Android Weekly Issue #234 本期内容包括: ConstraintLayout的使用; ...