css，javascript，JQuey制作頁面切換-創(chuàng)新互聯(lián)

php練習(xí)-javascript，JQuey制作頁面切換

10年積累的成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計制作后付款的網(wǎng)站建設(shè)流程，更有和林格爾免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

一.重點：css樣式，js的dom取值，js的事件

JQuey引入地址
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>

二.js原生代碼
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>實踐題 - 選項卡</title>
<style type="text/css">
/ CSS樣式制作/
{margin:0;padding:0;font:normal 12px "微軟雅黑";color:#000000;}
tabs{width:290px; height:150px; padding:5px; margin:20px;}
tabs ul{list-style:none; display:block; height:30px; line-height:30px;}
tabs ul li{
float:left; width:60px; height:28px; line-height:28px; text-align:center;
display:inline-block;margin:0px 3px; border:1px solid #aaa;border-bottom:none;
cursor:pointer; background:#fff; list-style:none;
}
tabs ul li.on{border-top:2px solid saddlebrown; border-bottom:2px solid #fff;}
tabs div{
height:120px; line-height:25px; border:1px solid #336699;border-top:2px saddlebrown solid;padding:5px;}
.hide{display:none;}

</style>
<script type="text/javascript" src="jquery-1.10.2.min.js">

// JS實現(xiàn)選項卡切換
window.onload = function() {
var oTab = document.getElementById("tabs");
var oUl = oTab.getElementsByTagName("ul")[0];
var oLis = oUl.getElementsByTagName("li");
var oDivs = oTab.getElementsByTagName("div");

for(var i=0;i<oLis.length;i++) {
oLis[i].index = i;
// var text = oLis[i].getAttribute("index");
// document.write(text+"<br>");
// console.log(oLis[i].innerHTML);
oLis[i].onclick = function() {
for(var n=0;n<oLis.length;n++) {
oLis[n].className = "";
oDivs[n].className = "hide";
}
this.className = "on";
oDivs[this.index].className = "";
}
}
}

</head>
<body>

<div id="tabs">
<ul>
<li class="on">×××</li><li>家具</li><li>二手房</li>
</ul>
<div>
購昌平鄰鐵三居總價20萬買一居<br>
內(nèi)購五環(huán)三居 140萬安家東三環(huán)<br>
北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平<br>
京樓盤直降5000 中信府公園樓王現(xiàn)房<br>
</div>
<div class="hide">
出租屋大改造美少女的混搭小窩<br>
經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生<br>
新中式的酷色溫情 66平撞色活潑家居<br>
瓷磚就像選好老婆衛(wèi)生間煙道的設(shè)計<br>
</div>
<div class="hide">
通州豪華3居260萬二環(huán)稀缺2居250w甩<br>
西3環(huán)通透2居290萬 130萬2居限量搶購<br>
黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋!<br>
獨家別墅280萬蘇州橋2居優(yōu)惠價248萬<br>
</div>
</body>
</html>

三.jQuery寫法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>實踐題 - 選項卡</title>
<style type="text/css">
/ CSS樣式制作/
{margin:0;padding:0;font:normal 13px "微軟雅黑";color:#000000;}
tabs{width:290px; height:150px; padding:5px; margin:20px;}
tabs ul{list-style:none; display:block; height:30px; line-height:30px;}
tabs ul li{
float:left; width:60px; height:28px; line-height:28px; text-align:center;
margin:0px 3px; border:1px solid #aaa; border-bottom:2px;
cursor:pointer; background:#fff; list-style:none;
}
tabs ul li.on{border-top: 2px solid saddlebrown; border-bottom: 0 solid #fff; border-left: 2px solid saddlebrown; border-right: 2px solid saddlebrown;}
tabs div{
height:120px; line-height:25px; border:1px solid #336699;border: 2px solid saddlebrown; padding:5px;display: none;}
tabs div.on {display: block;}
</style>

// JQuery實現(xiàn)選項卡切換
$(document).ready(function() {
$("ul li").click(function () {
var index = $(this).index();
$(this).addClass("on").siblings().removeClass("on");
$("#tabs div").hide().eq(index).show();
});
});

</script>

</head>
<body>

<div id="tabs">
<ul>
<li class="on">×××</li>
<li>家具</li>
<li>二手房</li>
</ul>
<div class='on'>
購昌平鄰鐵三居總價20萬買一居<br>
內(nèi)購五環(huán)三居 140萬安家東三環(huán)<br>
北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平<br>
京樓盤直降5000 中信府公園樓王現(xiàn)房<br>
</div>
<div>
出租屋大改造美少女的混搭小窩<br>
經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生<br>
新中式的酷色溫情 66平撞色活潑家居<br>
瓷磚就像選好老婆衛(wèi)生間煙道的設(shè)計<br>
</div>
<div>
通州豪華3居260萬二環(huán)稀缺2居250w甩<br>
西3環(huán)通透2居290萬 130萬2居限量搶購<br>
黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋!<br>
獨家別墅280萬蘇州橋2居優(yōu)惠價248萬<br>
</div>
</body>
</html>

四.頁面輸出
相比之下，jQuery的寫法比較簡潔

css，javascript，JQuey制作頁面切換

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)頁名稱：css，javascript，JQuey制作頁面切換-創(chuàng)新互聯(lián)
本文鏈接：http://www.rwnh.cn/article26/dgsocg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、外貿(mào)建站、做網(wǎng)站、品牌網(wǎng)站制作、企業(yè)建站、網(wǎng)站內(nèi)鏈

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

css，javascript，JQuey制作頁面切換-創(chuàng)新互聯(lián)

css，javascript，JQuey制作頁面切換-創(chuàng)新互聯(lián)