原生JS與jQuery編寫簡(jiǎn)單選項(xiàng)卡
更新時(shí)間：2017年10月30日 09:18:18 作者：看五分鐘佩奇的小姑姑
這篇文章主要為大家詳細(xì)介紹了原生JS與jQuery編寫簡(jiǎn)單選項(xiàng)卡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JS編寫簡(jiǎn)單選項(xiàng)卡的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery選項(xiàng)卡</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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jQuery實(shí)例—選項(xiàng)卡的簡(jiǎn)單實(shí)現(xiàn)(js源碼和jQuery)
- jquery插件tytabs.jquery.min.js實(shí)現(xiàn)漸變TAB選項(xiàng)卡效果
- 原生js和jQuery寫的網(wǎng)頁(yè)選項(xiàng)卡特效對(duì)比
- 簡(jiǎn)單選項(xiàng)卡 js和jquery制作方法分享
- js/jQuery簡(jiǎn)單實(shí)現(xiàn)選項(xiàng)卡功能
- 結(jié)構(gòu)/表現(xiàn)/行為完全分離的選項(xiàng)卡(jquery版和原生JS版)
- JQuery 選項(xiàng)卡效果(JS與HTML的分離)
相關(guān)文章
apply和call方法定義及apply和call方法的區(qū)別
apply和call功能一樣，只是傳入的參數(shù)列表形式不同，本文給大家介紹apply和call方法定義及apply和call方法的區(qū)別，感興趣的朋友一起學(xué)習(xí)吧2015-11-11
解決layui 三級(jí)聯(lián)動(dòng)下拉框更新時(shí)回顯的問(wèn)題
今天小編就為大家分享一篇解決layui 三級(jí)聯(lián)動(dòng)下拉框更新時(shí)回顯的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
這篇文章主要介紹了詳解ES6中的Map與Set集合，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
JavaScript實(shí)現(xiàn)復(fù)選框全選和取消全選
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)復(fù)選框全選和取消全選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
JavaScript 函數(shù)式編程實(shí)踐(來(lái)自IBM)
說(shuō)到函數(shù)式編程，人們的第一印象往往是其學(xué)院派，晦澀難懂，大概只有那些蓬頭散發(fā)，不修邊幅，甚至有些神經(jīng)質(zhì)的大學(xué)教授們才會(huì)用的編程方式。2010-06-06
javascript的數(shù)組排序函數(shù) sort方法，默認(rèn)是按照ASCII 字符順序進(jìn)行升序排列。2009-08-08
用js獲取div的內(nèi)容的方法，其實(shí)原理就是利用innerText或innerHTML2009-05-05
這篇文章主要給大家介紹了關(guān)于js數(shù)據(jù)類型以及其判斷方法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
以下是對(duì)使用js實(shí)現(xiàn)雪花飄落的效果進(jìn)行了介紹。需要的朋友可以 過(guò)來(lái)參考下2013-08-08
JavaScript通過(guò)setTimeout實(shí)時(shí)顯示當(dāng)前時(shí)間的方法
這篇文章主要介紹了JavaScript通過(guò)setTimeout實(shí)時(shí)顯示當(dāng)前時(shí)間的方法,涉及javascript操作時(shí)間顯示的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04