多种方法实现Tab切换—原生javaScript & JQuery方法

最新推荐文章于 2022-07-26 11:19:18 发布

wenmin1987

最新推荐文章于 2022-07-26 11:19:18 发布

阅读量387

点赞数

分类专栏： JavaScript 文章标签： tab切换 tab切换javascript tab切换面向对象 tab切换jquery

本文链接：https://blog.csdn.net/wenmin1987/article/details/87879889

版权

JavaScript 专栏收录该内容

64 篇文章 0 订阅

订阅专栏

原生基础demo

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Tab效果</title>

<style type="text/css">

*{

            margin: 0;

            padding: 0;

        }

        ul{

            list-style: none;

        }

        #tab{

            border: 1px solid #ccc;

            margin: 20px auto;

            width: 403px;

            border-top: none;

        }

        .list ul{

            overflow: hidden;

        }

        .list li{

float: left;

            padding-left: 28px;

            padding-right: 28px;

            padding-top: 6px;

            padding-bottom: 6px;

            border: 1px solid rgb(197, 55, 86);

            background: -moz-linear-gradient(top, #FEFEFE, #EDEDED);

            background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));

            border-right: none;

            cursor: pointer;

        }

.list li:first-child{

            border-left: none;

        }

        #listCon{

            height: 100px;

        }

        #listCon div{

            padding:10px;

            position:absolute;

display: none;

            /* opacity:0;

            filter:alpha(opacity=0); */

        }

        .list li:hover{

            background: #fff;

            border-bottom: none;

        }

        .list li.cur{

            background: #fff;

            border-bottom: none;

        }

        #listCon div.cur{

            /* opacity:1;

            filter:alpha(opacity=100); */

display: block;

        }

    </style>

</head>

<body>

    <div id="tab">

        <div class="list">

            <ul>

                <li class="cur">许嵩</li>

                <li>周杰伦</li>

                <li>林俊杰</li>

                <li>陈奕迅</li>

            </ul>

        </div>

        <div id="listCon">

            <div class="cur">断桥残雪、千百度、幻听、想象之中</div>

            <div>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话</div>

            <div>被风吹过的夏天、江南、一千年以后</div>

            <div>十年、K歌之王、浮夸</div>

        </div>

    </div>

    <script type="text/javascript">

        window.onload = function(){

            var oDiv = document.getElementById("tab");

            var lis = oDiv.getElementsByTagName("li");

            var oDivCon = document.getElementById("listCon");

            var lisDiv = oDivCon.getElementsByTagName("div");

            for(var i=0;i<lis.length;i++){

                lis[i].index = i;

                lis[i].onclick = function(){

                    show(this.index);

                }

            }

            function show(a){

                for(var j=0;j<lis.length;j++){

                    lis[j].className = "";

                    lisDiv[j].className = "";

                }

                lis[a].className = "cur";

                lisDiv[a].className = "cur";

            }

        }

    </script>

</body>

</html>

TAb切换思路一:
判断是否为当前点击对象，来增加类名和减少类名
要在面向过程的基础上改写成面向对象的方法，需要经过四个步骤：
1、创建构造函数
2、将变量变成对象的属性
3、将函数变成对象的方法
4、实例对象

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab1_三种方法实现</title>
<style>
*{margin:0;padding:0; list-style: none;text-align: center;}
#tab,#tab2{width: 600px;margin:50px auto 0;}
#title{overflow: hidden;}
#title span{float: left;width:199px;height: 30px;border-right: 1px solid #EAEAEA;line-height: 30px;font-size: 22px;color:#333333;background: #FCFCFC;cursor:pointer;}
#content{height: 200px;overflow: hidden;background:#C8BBF8;}
#content li{height:200px;line-height: 200px;font-size: 80px;display: none;}
/*默认样式&点击后样式*/
#title .select{color:#FFFFFF;background: #0AA770;}
#content .show{display: block;}
</style>
</head>
<body>
<div id="tab">
<h1 id="title">
<span class="select">标题一</span>
<span>标题二</span>
<span>标题三</span>
</h1>
<ul id="content">
<li class="show">内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
</div>
<div id="tab2">
<h1 id="title">
<span class="select">标题一</span>
<span>标题二</span>
<span>标题三</span>
</h1>
<ul id="content">
<li class="show">内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
</div>
<script src="jquery-1.8.3.min.js"></script>
<script>
/*面向过程写法：*/
/*var tit=document.getElementById('title');
var con=document.getElementById('content');
var spans=tit.getElementsByTagName('span');
var lis=con.getElementsByTagName('li');
//第一个for循环给每一个span绑定点击事件
for (var i = 0, len= spans.length; i < len; i++){
spans[i].οnclick=function(){
//第二个for循环遍历找出当前点击是的span
for (var j = 0,len= spans.length; j < len; j++) {
if (spans[j]==this) {
this.className='select';
// spans[j].className='select';//效果同上
lis[j].className='show';
} else {//若没被选中清空设置
spans[j].className='';
lis[j].className='';
}
}
}
}*/

/*面向对象写法：*/
//1、创建构造函数
function Tab(targetID){
//2、把变量变成对象的属性
this.tab=document.getElementById(targetID);
this.spans=this.tab.getElementsByTagName('span');
this.lis=this.tab.getElementsByTagName('li');
var _this=this;//此时this指向实例对象
for (var i = 0; i < this.spans.length; i++) {
this.spans[i].οnclick=function(){
_this.clickTab(this);//此时this指向点击的span
}
};
}
//3、把函数变成对象的方法
Tab.prototype.clickTab=function(target){//target指向点击的span
for (var i = 0; i < this.spans.length; i++) {
if (this.spans[i]==target) {//此时this指向实例对象
this.spans[i].className='select';
this.lis[i].className='show';
}else{
this.spans[i].className='';
this.lis[i].className='';
}
}
}
//4、实例对象-多处使用
var tab1=new Tab('tab');
var tab2=new Tab('tab2');

/*jQuery写法1：*/
/*$('#title span').click(function(){
var i=$(this).index();//获取当前元素索引值
$(this).addClass('select').siblings().removeClass('select');
$('#content li').eq(i).addClass('show').siblings().removeClass('show');
})*/
/*jQuery写法2：*/
/*$('#title span').click(function(){
var i=$('#title span').index(this);
$('#title span').eq(i).addClass('select').siblings().removeClass('select');
$('#content li').eq(i).addClass('show').siblings().removeClass('show');
})*/
</script>
</body>
</html>

TAb切换思路二:
获取当前点击对象的索引，直接给其增加类名

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab2_三种方法实现</title>
<style>
*{margin:0;padding:0; list-style: none;text-align: center;}
#tab,#tab2{width: 600px;margin:50px auto 0;}
#title{overflow: hidden;}
#title span{float: left;width:199px;height: 30px;border-right: 1px solid #EAEAEA;line-height: 30px;font-size: 22px;color:#333333;background: #FCFCFC;cursor:pointer;}
#content{height: 200px;overflow: hidden;background:#C8BBF8;}
#content li{height:200px;line-height: 200px;font-size: 80px;display: none;}
/*默认样式&点击后样式*/
#title .select{color:#FFFFFF;background: #0AA770;}
#content .show{display: block;}
</style>
</head>
<body>
<div id="tab">
<h1 id="title">
<span class="select">标题一</span>
<span>标题二</span>
<span>标题三</span>
</h1>
<ul id="content">
<li class="show">内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
</div>
<div id="tab2">
<h1 id="title">
<span class="select">标题一</span>
<span>标题二</span>
<span>标题三</span>
</h1>
<ul id="content">
<li class="show">内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
</div>
<script>
/*一、面向过程写法：*/
/*var tit=document.getElementById('title');
var con=document.getElementById('content');
var spans=tit.getElementsByTagName('span');
var lis=con.getElementsByTagName('li');
//第一个for循环给每一个span绑定点击事件
for (var i = 0, len= spans.length; i < len; i++){
spans[i].index=i;//不同处：获取当前点击事件的索引值为后面设置绑定对象使用
spans[i].οnclick=function(){
//第二个for循环遍历找出当前点击是的span
//清空所有的绑定对象
for (var j = 0,len = spans.length; j < len;j++) {
spans[j].className='';
lis[j].className='';
}
//单独对点击事件绑定对象，索引值来自之前获取的
this.className='select';
lis[this.index].className='show';
}
}*/

/*面向对象写法：*/
//1、创建构造函数
function Tab(targetID){
// 2、把变量变成对象的属性
this.tab=document.getElementById(targetID);
this.spans=this.tab.getElementsByTagName('span');
this.lis=this.tab.getElementsByTagName('li');
this.prevIndex=0;//上次显示元素下标&第一次点击时需要清除样式的下标
var _this=this;//此时this指向实例对象
for (var i = 0; i < this.spans.length; i++) {
this.spans[i].index=i;
this.spans[i].οnclick=function(){
_this.clickTab(this);//此时this指向点击的span
_this.prevIndex=this.index;//实现点击操作后，保存点击对象的下标
}
}

}
// 3、把函数变成对象的方法
Tab.prototype.clickTab=function(target){//target指向点击的span
//this.prevIndex-上次显示元素下标
this.spans[this.prevIndex].className='';
this.lis[this.prevIndex].className='';
this.spans[target.index].className='select';
this.lis[target.index].className='show';
}
//4、实例对象
var tab=new Tab('tab');
var tab2=new Tab('tab2');
</script>
</body>
</html>

wenmin1987

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
多种方法实现Tab切换—原生javaScript & JQuery方法

原生基础demo&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Tab效果&lt;/title&gt;&lt;style type="text/css"&
复制链接

扫一扫