js實(shí)現(xiàn)選項(xiàng)卡效果

更新時(shí)間：2020年03月07日 11:09:21 作者：林西相心

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)選項(xiàng)卡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)選項(xiàng)卡效果的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<script type="text/javascript">
 window.onload=function(){
 var ob = document.getElementById('div1');
 var ob1 = div1.getElementsByTagName('input');
 var ob2= div1.getElementsByTagName('div');
 
 for(var i = 0;i< ob1.length;i++){
  ob1[i].index=i;
  ob1[i].onmouseover=function(){
  
  for(var i = 0;i< ob1.length;i++){
  ob2[i].style.display='none';
   ob1[i].className='';
      } 
 this.className='active';
  ob2[this.index].style.display='block';

 
 } 
  ob1[i].onmouseout=function(){
  for(var i=0 ; i< ob1.length;i++){
  ob2[i]['style']['display']='none';
  }
  }

 } 

 }; 
 
</script>
<body>
<style type="text/css">
#div1 div{
 width: 100px;
 height: 100px;
 border-top: 2px solid grey;
 background-color: #ccc;
} 
.active {
 background-color: yellow;
}

</style>
<div id="div1">
 
<input type="button" value="1" class="active">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">

<div style="display:block;" >1111</div>
<div style="display: none;">2222</div>
<div style="display: none;">3333</div>
<div style="display: none;">4444</div>

</div>

</body>
</html>

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊兩個(gè)精彩的專題：javascript選項(xiàng)卡操作方法匯總 jquery選項(xiàng)卡操作方法匯總

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

前端常見的時(shí)間轉(zhuǎn)換方法以及獲取當(dāng)前時(shí)間方法小結(jié)
在做開發(fā)時(shí)會(huì)對不同的時(shí)間格式進(jìn)行轉(zhuǎn)換,下面這篇文章主要給大家介紹了關(guān)于前端常見的時(shí)間轉(zhuǎn)換方法以及獲取當(dāng)前時(shí)間方法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-01-01
js實(shí)現(xiàn)登錄與注冊界面
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)登錄與注冊界面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
JS實(shí)現(xiàn)統(tǒng)計(jì)復(fù)選框選中個(gè)數(shù)并提示確定與取消的方法
這篇文章主要介紹了JS實(shí)現(xiàn)統(tǒng)計(jì)復(fù)選框選中個(gè)數(shù)并提示確定與取消的方法,可實(shí)現(xiàn)javascript針對頁面復(fù)選框元素的統(tǒng)計(jì)與提示功能,需要的朋友可以參考下
2015-07-07
淘寶搜索框效果實(shí)現(xiàn)分析
在輸入框里面預(yù)設(shè)一段提示文字，當(dāng)焦點(diǎn)在輸入框的時(shí)候清空這段文字，這在目前來說已經(jīng)不是什么新鮮事了。
2011-03-03
html 鎖定頁面(js遮罩層彈出div效果)
html 鎖定頁面(js遮罩層彈出div效果)，需要的朋友可以參考下。
2009-10-10
深入剖析JavaScript instanceof 運(yùn)算符
這篇文章主要介紹了深入剖析JavaScript instanceof 運(yùn)算符,ECMAScript 引入了另一個(gè) Java 運(yùn)算符 instanceof 來解決這個(gè)問題。instanceof 運(yùn)算符與 typeof 運(yùn)算符相似，用于識(shí)別正在處理的對象的類型。,需要的朋友可以參考下
2019-06-06
Javascript 去除數(shù)組的重復(fù)元素
在js中，如何去除指定數(shù)組中的重復(fù)元素？
2010-05-05
淺談JavaScript暫時(shí)性死區(qū)與垃圾回收機(jī)制
本文主要介紹了淺談JavaScript暫時(shí)性死區(qū)與垃圾回收機(jī)制，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
基于JavaScript實(shí)現(xiàn)單例模式
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)單例模式,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-10-10
基于JavaScript實(shí)現(xiàn)每日簽到打卡軌跡功能
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)每日簽到打卡軌跡功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-11-11