选项卡切换在做网页的时候经常会用到，以往都是用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. UWP 律师查询 MVVM

    APP简介 律师查询是基于聚合数据的律师查询接口做的,这个接口目前处于停用状态,但是,由于我是之前申请的,所以,还可以用,应该是无法再申请了. 效果图 开发 一.HttpHelper 既然是请求接口的 ...

  2. Entity Framework Core 实现MySQL 的TimeStamp/RowVersion 并发控制

    将通用的序列号生成器库 从SQL Server迁移到Mysql 遇到的一个问题,就是TimeStamp/RowVersion并发控制类型在非Microsoft SQL Server数据库中的实现.SQ ...

  3. 一百元的智能家居——Asp.Net Mvc Api+讯飞语音+Android+Arduino

    大半夜的,先说些废话提提神 如今智能家居已经不再停留在概念阶段,高大上的科技公司都已经推出了自己的部分或全套的智能家居解决方案,不过就目前的现状而言,大多还停留在展厅阶段,还没有广泛的推广起来,有人说 ...

  4. 【翻译】MongoDB指南/CRUD操作（四）

    [原文地址]https://docs.mongodb.com/manual/ CRUD操作(四) 1 查询方案(Query Plans) MongoDB 查询优化程序处理查询并且针对给定可利用的索引选 ...

  5. python 3.5 成功安装 scrapy 的步骤

    http://www.cnblogs.com/hhh5460/p/5814275.html

  6. php 基础代码大全（不断完善中）

    下面是基础的PHP的代码,不断完善中~ //语法错误(syntax error)在语法分析阶段,源代码并未被执行,故不会有任何输出. /* [命名规则] */ 常量名 类常量建议全大写,单词间用下划线 ...

  7. QT内省机制、自定义Model、数据库

    本文将介绍自定义Model过程中数据库数据源的获取方法,我使用过以下三种方式获取数据库数据源: 创建 存储对应数据库所有字段的 结构体,将结构体置于容器中返回,然后根据索引值(QModelIndex) ...

  8. Canvas讲解

    1.Canvas是什么? 简单地说canvas是画布,可以进行画任何的线.图形.填充等一系列的操作,而且操作的画图就是js, 提供简单的二维矢量绘图. 2.步骤: <canvas id=&quo ...

  9. Android Weekly Notes Issue #237

    Android Weekly Issue #237 December 25th, 2016 Android Weekly Issue #237 这是本年的最后一篇issue, 感谢大家. 本期内容包括 ...

  10. maven 快照

    大型应用软件一般由多个模块组成,一般它是多个团队开发同一个应用程序的不同模块,这是比较常见的场景.例如,一个团队正在对应用程序的应用程序,用户界面项目(app-ui.jar:1.0) 的前端进行开发, ...