JS實現(xiàn)簡單tab選項卡切換
更新時間：2019年10月25日 08:34:30 作者：Handsome_fan
這篇文章主要為大家詳細介紹了JS實現(xiàn)簡單tab選項卡切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)簡單tab選項卡切換的具體代碼，供大家參考，具體內容如下
本人在上一篇文章也寫了用JS來實現(xiàn)tab選項卡切換效果，但是上次的那個代碼比較復雜，這次是簡化版的。
<!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">斷橋殘雪、千百度、幻聽、想象之中</div>
<div>紅塵客棧、牛仔很忙、給我一首歌的時間、聽媽媽的話</div>
<div>被風吹過的夏天、江南、一千年以后</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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要給大家介紹了關于全網(wǎng)小程序接口請求封裝的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
這篇文章主要介紹了JS實現(xiàn)固定在右下角可展開收縮DIV層的方法,右下角的div層可實現(xiàn)收縮與展開的功能,非常具有實用價值,需要的朋友可以參考下2015-02-02
layer彈出層的關閉問題詳解之在執(zhí)行完畢后關閉當前彈出層
在前端頁面中用layer打開窗口供用戶輸入或選擇是非常常見的用法,但是有時為了完成一次操作,需要彈出多個窗口進行選擇、輸入或者提示,因此在關閉窗口的時候需要實現(xiàn)指定關閉任意窗口,需要的朋友可以參考下2023-10-10
JavaScript中的console.dir()函數(shù)介紹
這篇文章主要介紹了JavaScript中的console.dir()函數(shù)介紹,console.dir主要用來dump某些對象的詳細信息,需要的朋友可以參考下2014-12-12
這篇文章主要是對XMLHttpRequest的緩存問題進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
本篇文章主要介紹了如何用webpack打包一個網(wǎng)站應用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)九宮格點擊變色效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
排序是我們在日常開發(fā)中經常遇到的一個功能，下面這篇文章主要給大家介紹了利用JavaScript對中文（漢字）進行排序的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編一起來看看吧。2017-06-06
不知道大家在線上購物的時候有沒有發(fā)現(xiàn)到，自己逛起來根本就停不下來，越往下翻越是覺得就會出現(xiàn)需要的東西，這就是很多電商公司都在使用的瀑布流布局。本文就來用JS實現(xiàn)這一布局，需要的可以參考一下2023-04-04
這篇文章主要介紹了JS對象屬性的檢測與獲取操作,結合實例形式分析了JS針對ES5、ES6實現(xiàn)對象屬性的檢測與獲取常見操作技巧,需要的朋友可以參考下2020-03-03