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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要給大家介紹了關于全網小程序接口請求封裝的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧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打包一個網站應用，小編覺得挺不錯的，現(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