jq实现的tab小demo

来源：互联网发布：win7桌面整理软件编辑：程序博客网时间：2024/05/14 20:51

一：体会

虽然只是一个很小的demo，但途中却遇到很多问题，问题都很小但是却很难发现，解决过程很是恼火，偶尔灵光一闪却又想了起来，而且混淆了很多jq和原生js中的方法，分不清楚哪个是jq中的，哪个是原生js中的，有很多东西都看过，但是却又很多细节不清楚，做东西时很容易发生问题并且半天发现不了，要是有过目不忘的本领就好了~~

二：查询知识点

不是jq对象无法使用jq库中的方法，比如下列代码中的boxs[i],不要将其转化为jq对象$(boxs[i])才能使用方法show()
在for循环中使用let声明的变量只在本轮循环有效，每一次循环的变量都是一个新的变量，可以循环闭包中变量i的问题，也在下面代码中有体现
数组也具有indexOf方法，例如：arr.indexOf(“a”);返回”a”在数组中第一次出现的位置
原生js中绑定点击事件方法：.onclick = function(){}; jq中绑定点击事件方法：.click(function(){});或者使用.on() 方法
事件冒泡和事件捕捉的区别：父级元素和子级元素都绑定了click事件，如果点击了子级元素，父级元素和子级元素都会触发click事件
- 事件捕捉：父元素先触发，子元素后触发
- 事件冒泡：子元素先触发，父元素后触发
this的指向由运行时指定，而不是编写时指定，箭头函数相反
jq中的eq有两种用法： 1. :eq(index)选择器用法，2. .eq(index)函数用法，都是获取相应index位置的元素
jq中的index()方法，不传参数index()用法，获取相应元素在同胞元素的位置，传参().index(element)用法，获取element元素在(selector)中的位置，element为相应的jq和dom选择器
.sibings()获取相应元素的同胞元素，还可以添加选择器限制相应选择器的同胞元素.sibings(selector)
mouseover与mouseenter的区别：
- 不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
- 只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
  mouseout与mouseleave同理

三：代码

html代码：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title>tab选项卡</title>        <link rel="stylesheet" href="css/tab.css" />    </head>    <body>        <div class="main">            <ul class="tab_nav">                <li class="tab select">HTML</li>                <li class="tab unsel">CSS</li>                <li class="tab unsel">JS</li>                <li class="white">空白</li>            </ul>            <div class="tab_content">                <div class="box1">我负责网页结构。</div>                <div class="box2 hide">我负责网页样式。</div>                <div class="box3 hide">我负责网页特效。</div>            </div>        </div>        <script src="js/jquery-1.11.0.min.js"></script>        <script src="js/tab.js"></script>    </body></html>

css代码：

body,ul,li,div{    margin:0px;    padding:0px;}ul,li{    list-style: none;}ul:after{    content:"";    display: block;    clear:both;}li{    float:left;    padding:5px;}.main{    padding:20px;    border:1px solid #bbb;    width:280px;    margin:100px auto 0;}.tab_nav .select{    border-top:1px solid #bbb;    border-left:1px solid #bbb;    border-right:1px solid #bbb;}.tab_nav .unsel{    border-bottom:1px solid #bbb;}.tab_nav .white{    text-indent: -9999em;    width:100px;    border-bottom:1px solid #bbb;}.tab_nav .tab{    width:46px;    text-align: center;    box-sizing;content-box;}.tab_content div{    padding-top:10px;    height:50px;}.tab_content .hide{    display: none;}

javascript代码：

$(function(){    var tabs = $(".main .tab_nav .tab");    var boxs = $(".main .tab_content div");    for(let i in tabs){        tabs[i].onclick = function(){            $(this).addClass("select").removeClass("unsel").siblings().addClass("unsel").removeClass("select");            $(boxs[i]).show().siblings().hide();        };    };});

四：demo效果图

这里写图片描述

如果有问题，或者有好的意见，可以在下面给我评论，我还是个noob.

阅读全文

1 0