原生JS與jQuery編寫簡單選項卡
更新時間：2017年10月30日 09:18:18 作者：看五分鐘佩奇的小姑姑
這篇文章主要為大家詳細(xì)介紹了原生JS與jQuery編寫簡單選項卡，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS編寫簡單選項卡的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery選項卡</title>
<style type="text/css">
#div1 div{width: 200px;height: 200px;border: 1px red solid;display: none;}
.active{background:#999;}
</style>
<!-- 原生的JS -->
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
var aInput=document.getElementsByTagName('input');
var aCon=oDiv.getElementsByTagName('div');
for (var i = 0; i < aInput.length; i++) {
aInput[i].index=i;
aInput[i].onclick=function(){
for (var i = 0; i < aInput.length; i++) {
aInput[i].className='';
aCon[i].style.display='';
}
this.className='active';
aCon[this.index].style.display='block';
}
}
}
</script>
<!-- jquery寫法 -->
<script type="text/javascript" src='../jquery-3.2.1.min.js'></script>
<script type="text/javascript">
$(function(){
$('#div1').find('input').click(function(){
$('#div1').find('input').attr('class','');
$('#div1').find('div').css('display','none');
$(this).attr('class','active');
$('#div1').find('div').eq($(this).index()).css('display','block');
})
})
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display: block;">11111</div>
<div>22222</div>
<div>33333</div>
</div>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
apply和call方法定義及apply和call方法的區(qū)別
apply和call功能一樣，只是傳入的參數(shù)列表形式不同，本文給大家介紹apply和call方法定義及apply和call方法的區(qū)別，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
今天小編就為大家分享一篇解決layui 三級聯(lián)動下拉框更新時回顯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了詳解ES6中的Map與Set集合，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
JavaScript實現(xiàn)復(fù)選框全選和取消全選
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)復(fù)選框全選和取消全選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
JavaScript 函數(shù)式編程實踐(來自IBM)
說到函數(shù)式編程，人們的第一印象往往是其學(xué)院派，晦澀難懂，大概只有那些蓬頭散發(fā)，不修邊幅，甚至有些神經(jīng)質(zhì)的大學(xué)教授們才會用的編程方式。2010-06-06
javascript的數(shù)組排序函數(shù) sort方法，默認(rèn)是按照ASCII 字符順序進(jìn)行升序排列。2009-08-08
用js獲取div的內(nèi)容的方法，其實原理就是利用innerText或innerHTML2009-05-05
這篇文章主要給大家介紹了關(guān)于js數(shù)據(jù)類型以及其判斷方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
以下是對使用js實現(xiàn)雪花飄落的效果進(jìn)行了介紹。需要的朋友可以 過來參考下2013-08-08
JavaScript通過setTimeout實時顯示當(dāng)前時間的方法
這篇文章主要介紹了JavaScript通過setTimeout實時顯示當(dāng)前時間的方法,涉及javascript操作時間顯示的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04