js+css實(shí)現(xiàn)tab菜單切換效果的方法
本文實(shí)例講述了js+css實(shí)現(xiàn)tab菜單切換效果的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
index.css如下:
margin: 0px;
padding: 0px;
}
body {
width: 600px;
margin: 0 auto;
background-color: silver;
}
#contanier {
background-color: yellow;
width: 600px;height: 400px;
}
#tabNavi {
width: 600px;height: 30px;
background-color: #00bfff;
text-decoration: none;
list-style-type: none;
}
#tabNavi li {
float: left;
margin-right: 7px;
background-color: #008b8b;
color: white;
cursor: pointer;
width: 60px;
height: 28px;
line-height: 30px;
text-align: center;
}
#content {
width: 600px;height: 370px;
background-color: white;
}
index.html如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js實(shí)現(xiàn)tab菜單動(dòng)態(tài)切換效果</title>
<link href="css/index.css" rel="stylesheet" />
<script type="text/javascript">
function gel(id) {
return document.getElementById(id);
}
var arr = [
{ "title": "新聞", "content": "這是新聞?lì)l道" },
{ "title": "財(cái)經(jīng)", "content": "這是財(cái)經(jīng)頻道" },
{ "title": "娛樂", "content": "這是娛樂頻道" },
{ "title": "體育", "content": "這是體育頻道" },
{ "title": "汽車", "content": "這是汽車頻道" },
{ "title": "視頻", "content": "這是視頻頻道" },
{ "title": "生活", "content": "這是生活頻道" }
];
window.onload = function() {
for (var i = 0; i < arr.length; i++) {
var liNew = document.createElement("li");
liNew.innerHTML = arr[i].title;
gel("tabNavi").appendChild(liNew);
//在這些li上面都綁定點(diǎn)擊事件,就需要給他們每一個(gè)賦一個(gè)屬性(最好是id)
liNew.setAttribute("id", i);
liNew.onclick = function () {
var navs = gel("tabNavi").childNodes;
//清除所有顏色
for (var j = 0; j < navs.length; j++) {
if (navs[j].nodeType == 1) {
navs[j].style.backgroundColor ="#008b8b";
}
}
this.style.backgroundColor = "red";
gel("content").innerHTML = arr[this.id].content;
};
}
};
</script>
</head>
<body>
<div id="contanier">
<ul id="tabNavi"></ul>
<div id="content" class="content"></div>
</div>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- 使用ReactJS實(shí)現(xiàn)tab頁切換、菜單欄切換、手風(fēng)琴切換和進(jìn)度條效果
- JS實(shí)現(xiàn)滑動(dòng)菜單效果代碼(包括Tab,選項(xiàng)卡,橫向等效果)
- js基于面向?qū)ο髮?shí)現(xiàn)網(wǎng)頁TAB選項(xiàng)卡菜單效果代碼
- js實(shí)現(xiàn)類似菜單風(fēng)格的TAB選項(xiàng)卡效果代碼
- JS+CSS實(shí)現(xiàn)滑動(dòng)切換tab菜單效果
- js實(shí)現(xiàn)的簡潔網(wǎng)頁滑動(dòng)tab菜單效果代碼
- javascript采用數(shù)組實(shí)現(xiàn)tab菜單切換效果
- JavaScript Tab菜單實(shí)現(xiàn)過程解析
相關(guān)文章
利用js將ajax獲取到的后臺(tái)數(shù)據(jù)動(dòng)態(tài)加載至網(wǎng)頁中的方法
今天小編就為大家分享一篇利用js將ajax獲取到的后臺(tái)數(shù)據(jù)動(dòng)態(tài)加載至網(wǎng)頁中的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08Winform客戶端向web地址傳參接收參數(shù)的方法
這篇文章主要介紹了Winform客戶端向web地址傳參接收參數(shù)的方法的相關(guān)資料,需要的朋友可以參考下2016-05-05關(guān)于ES6中的箭頭函數(shù)超詳細(xì)梳理
箭頭函數(shù)可以說是es6的一大亮點(diǎn),使用箭頭函數(shù),可以簡化編碼過程,是代碼更加的簡潔,下面這篇文章主要給大家介紹了關(guān)于ES6中箭頭函數(shù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08three.js 利用uv和ThreeBSP制作一個(gè)快遞柜功能
這篇文章主要介紹了three.js 利用uv和ThreeBSP制作一個(gè)快遞柜,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08javascript 獲取網(wǎng)頁參數(shù)系統(tǒng)
用處比較多,適合在當(dāng)前網(wǎng)頁打開別的網(wǎng)站的內(nèi)容2008-07-07詳細(xì)聊聊JavaScript是如何影響DOM樹構(gòu)建的
DOM (Document Object Model) 的全稱是文檔對(duì)象模型,它可以以一種獨(dú)立于平臺(tái)和語言的方式訪問和修改一個(gè)文檔的內(nèi)容和結(jié)構(gòu),這篇文章主要給大家介紹了關(guān)于JavaScript是如何影響DOM樹構(gòu)建的相關(guān)資料,需要的朋友可以參考下2021-08-08使用JavaScript進(jìn)行進(jìn)制轉(zhuǎn)換將字符串轉(zhuǎn)換為十進(jìn)制
JS 是一個(gè)很神奇的語言,可以將任意進(jìn)制字符串轉(zhuǎn)換為十進(jìn)制,如二進(jìn)制,八進(jìn)制,十六進(jìn)制, 第二數(shù)數(shù)不寫即為最常用的轉(zhuǎn)換為整型十進(jìn)制2014-09-09