js怎么實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡功能
這篇文章將為大家詳細(xì)講解有關(guān)js怎么實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡功能，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)公司是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司，自成立以來(lái)公司不斷探索創(chuàng)新，始終堅(jiān)持為客戶提供滿意周到的服務(wù)，在本地打下了良好的口碑，在過(guò)去的十年時(shí)間我們累計(jì)服務(wù)了上千家以及全國(guó)政企客戶，如成都資質(zhì)代辦等企業(yè)單位，完善的項(xiàng)目管理流程，嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過(guò)硬的技術(shù)實(shí)力獲得客戶的一致贊美。
具體內(nèi)容如下
首先我們來(lái)寫(xiě)HTML代碼，構(gòu)建出整體結(jié)構(gòu)
代碼如下：
內(nèi)容1
內(nèi)容2
內(nèi)容3
內(nèi)容4
注：section 部分添加了style，目的是方便演示，為規(guī)范HTML與css的代碼風(fēng)格，不推薦這樣使用。
接著我們使用css代碼構(gòu)建出樣式
代碼如下：
*{
text-align: center;
}
nav li{
display: inline;
width: 24%;
text-decoration: none;
padding: 15px;
}
li:hover{
background-color: lightblue;
}
section{
height: 300px;
}最后是js的代碼，實(shí)現(xiàn)選項(xiàng)卡功能
代碼如下：
window.onload=function () {
//獲取 li 也就是選項(xiàng)卡選項(xiàng)tab
var nav=document.getElementById('nav');
var oNav=nav.getElementsByTagName('li');
//獲取 包裹在container里面的section（內(nèi)容）
var container=document.getElementById('container');
var oDiv=container.getElementsByClassName('tab');
//使用 循環(huán)依次得到li
for(var i=0;i此上就是用js實(shí)現(xiàn)簡(jiǎn)單選項(xiàng)卡的全部?jī)?nèi)容，下面是整個(gè)代碼，復(fù)制粘貼到編譯器即可運(yùn)行
Title
內(nèi)容1
內(nèi)容2
內(nèi)容3
內(nèi)容4
重慶分公司
重慶分公司