快捷導(dǎo)航

js實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡效果

更新時(shí)間：2017年02月23日 15:33:42 作者：西門(mén)官人

本文主要介紹了js實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡效果的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧

效果如下：

代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style>
div{width:200px;height:100px;border:1px red solid;display:none};
</style>
<script>
window.onload=function(){
 var oDiv=document.getElementsByTagName("div")
 var oIput=document.getElementsByTagName("input")
 oDiv[0].style.display="block";
 var ten=oIput[0]
 for(i=0;i<oIput.length;i++){
 oIput[i].indent=i
 //通過(guò)自定義屬性獲得下標(biāo)值
 oIput[i].onclick=function(){
  ten.style.background=''
  oDiv[ten.indent].style.display="none"
  //點(diǎn)擊時(shí)把上一個(gè)隱藏
  this.style.background="yellow"
  oDiv[this.indent].style.display="block"
  ten=this
  }
 }
 }
</script>
</head>
<body>
<input type="button" value="按鈕一" style="background:yellow"/>
<input type="button" value="按鈕二"/>
<input type="button" value="按鈕三"/>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

ES6中module模塊化開(kāi)發(fā)實(shí)例淺析
這篇文章主要介紹了ES6中module模塊化開(kāi)發(fā),結(jié)合實(shí)例形式分析了ES6中模塊化開(kāi)發(fā)的相關(guān)功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2017-04-04
js獲取USB掃碼槍數(shù)據(jù)的方法
這篇文章主要為大家詳細(xì)介紹了js獲取USB掃碼槍數(shù)據(jù)的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
JS事件監(jiān)聽(tīng)與事件委托舉例詳解(前端小白必學(xué))
在JavaScript的學(xué)習(xí)中我們經(jīng)常會(huì)遇到JavaScript的事件機(jī)制,例如,事件綁定、事件監(jiān)聽(tīng)、事件委托(事件代理)等,下面這篇文章主要給大家介紹了關(guān)于JS事件監(jiān)聽(tīng)與事件委托的相關(guān)資料,需要的朋友可以參考下
2024-07-07
JS的執(zhí)行機(jī)制(EventLoop、宏任務(wù)和微任務(wù))
這篇文章主要介紹了JS的執(zhí)行機(jī)制(EventLoop、宏任務(wù)和微任務(wù))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。
2023-01-01
基于three.js編寫(xiě)的一個(gè)項(xiàng)目類(lèi)示例代碼
這篇文章主要給大家介紹了關(guān)于基于three.js編寫(xiě)的一個(gè)項(xiàng)目類(lèi)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2018-01-01
微信小程序自定義可滑動(dòng)日歷界面
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義可滑動(dòng)日歷界面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-12-12
JavaScript添加隨滾動(dòng)條滾動(dòng)窗體的方法
這篇文章主要介紹了JavaScript添加隨滾動(dòng)條滾動(dòng)窗體的方法,涉及JavaScript事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下
2016-02-02
JavaScript中的ArrayBuffer詳細(xì)介紹
這篇文章主要介紹了JavaScript中的ArrayBuffer詳細(xì)介紹,本文講解了Array 在內(nèi)存中的堆棧模型、原始緩沖區(qū)的創(chuàng)建、數(shù)據(jù)化數(shù)組、DataView對(duì)象、XHR2 中的 ArrayBuffer等內(nèi)容,需要的朋友可以參考下
2014-12-12
前端實(shí)現(xiàn)界面元素拖拽功能的3種方式總結(jié)(親測(cè)有效)
這篇文章主要介紹了前端實(shí)現(xiàn)界面元素拖拽功能的3種方式,三種方法分別是純HTML+CSS+JS、Vue模板和Vue全局指令,每種方法都通過(guò)監(jiān)聽(tīng)鼠標(biāo)事件來(lái)實(shí)現(xiàn)元素的拖動(dòng)功能,并通過(guò)控制閥來(lái)確保只有在指定區(qū)域按下鼠標(biāo)時(shí)才開(kāi)始拖動(dòng),需要的朋友可以參考下
2025-02-02
JavaScript實(shí)現(xiàn)好看的跟隨彩色氣泡效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)好看的跟隨彩色氣泡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02