JS實(shí)現(xiàn)簡(jiǎn)單tab選項(xiàng)卡切換
更新時(shí)間：2019年10月25日 08:34:30 作者：Handsome_fan
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單tab選項(xiàng)卡切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JS實(shí)現(xiàn)簡(jiǎn)單tab選項(xiàng)卡切換的具體代碼，供大家參考，具體內(nèi)容如下
本人在上一篇文章也寫了用JS來(lái)實(shí)現(xiàn)tab選項(xiàng)卡切換效果，但是上次的那個(gè)代碼比較復(fù)雜，這次是簡(jiǎn)化版的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab效果</title>
<style type="text/css">
ul{
list-style: none;
}
*{
margin: 0;
padding: 0;
}
#tab{
border: 1px solid #ccc;
margin: 20px auto;
width: 403px;
border-top: none;
}
.list ul{
overflow: hidden;
}
.list li{
float: left;
}
.list li{
padding-left: 28px;
padding-right: 28px;
padding-top: 6px;
padding-bottom: 6px;
border: 1px solid #ccc;
background: -moz-linear-gradient(top, #FEFEFE, #EDEDED);
background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));
border-right: none;
cursor: pointer;
}
#listCon{
height: 100px;
}
#listCon div{
padding:10px;
position:absolute;
opacity:0;
filter:alpha(opacity=0);
}
.list li:first-child{
border-left: none;
}
.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);
}
</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">斷橋殘雪、千百度、幻聽(tīng)、想象之中</div>
<div>紅塵客棧、牛仔很忙、給我一首歌的時(shí)間、聽(tīng)媽媽的話</div>
<div>被風(fēng)吹過(guò)的夏天、江南、一千年以后</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].onmouseover = 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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JavaScript實(shí)現(xiàn)tab欄切換效果
- JavaScript實(shí)現(xiàn)Tab選項(xiàng)卡切換
- JavaScript實(shí)現(xiàn)的簡(jiǎn)單Tab點(diǎn)擊切換功能示例
- js實(shí)現(xiàn)Tab選項(xiàng)卡切換效果
- Vue.js tab實(shí)現(xiàn)選項(xiàng)卡切換
- javascript實(shí)現(xiàn)tab切換的四種方法
- 一個(gè)精簡(jiǎn)的JS DIV層tab切換代碼
- js(JavaScript)實(shí)現(xiàn)TAB標(biāo)簽切換效果的簡(jiǎn)單實(shí)例
- javascript實(shí)現(xiàn)tabs選項(xiàng)卡切換效果(自寫原生js)
- js實(shí)現(xiàn)雙色球效果
相關(guān)文章
全網(wǎng)小程序接口請(qǐng)求封裝實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于全網(wǎng)小程序接口請(qǐng)求封裝的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
JS實(shí)現(xiàn)固定在右下角可展開(kāi)收縮DIV層的方法
這篇文章主要介紹了JS實(shí)現(xiàn)固定在右下角可展開(kāi)收縮DIV層的方法,右下角的div層可實(shí)現(xiàn)收縮與展開(kāi)的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
layer彈出層的關(guān)閉問(wèn)題詳解之在執(zhí)行完畢后關(guān)閉當(dāng)前彈出層
在前端頁(yè)面中用layer打開(kāi)窗口供用戶輸入或選擇是非常常見(jiàn)的用法,但是有時(shí)為了完成一次操作,需要彈出多個(gè)窗口進(jìn)行選擇、輸入或者提示,因此在關(guān)閉窗口的時(shí)候需要實(shí)現(xiàn)指定關(guān)閉任意窗口,需要的朋友可以參考下2023-10-10
JavaScript中的console.dir()函數(shù)介紹
這篇文章主要介紹了JavaScript中的console.dir()函數(shù)介紹,console.dir主要用來(lái)dump某些對(duì)象的詳細(xì)信息,需要的朋友可以參考下2014-12-12
這篇文章主要是對(duì)XMLHttpRequest的緩存問(wèn)題進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
詳解如何用webpack打包一個(gè)網(wǎng)站應(yīng)用項(xiàng)目
本篇文章主要介紹了如何用webpack打包一個(gè)網(wǎng)站應(yīng)用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
JavaScript實(shí)現(xiàn)九宮格點(diǎn)擊變色效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)九宮格點(diǎn)擊變色效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
JavaScript實(shí)現(xiàn)瀑布流布局的代碼分享
不知道大家在線上購(gòu)物的時(shí)候有沒(méi)有發(fā)現(xiàn)到，自己逛起來(lái)根本就停不下來(lái)，越往下翻越是覺(jué)得就會(huì)出現(xiàn)需要的東西，這就是很多電商公司都在使用的瀑布流布局。本文就來(lái)用JS實(shí)現(xiàn)這一布局，需要的可以參考一下
2023-04-04 
JS對(duì)象屬性的檢測(cè)與獲取操作實(shí)例分析
這篇文章主要介紹了JS對(duì)象屬性的檢測(cè)與獲取操作,結(jié)合實(shí)例形式分析了JS針對(duì)ES5、ES6實(shí)現(xiàn)對(duì)象屬性的檢測(cè)與獲取常見(jiàn)操作技巧,需要的朋友可以參考下
2020-03-03