[作特效, 學JS] -- 07 網頁選項卡
最終效果
實現的功能
- 鼠標移入 tab, 鏈接內容自動切換
- 鼠標移入 tab, tab 自動高亮
- 鼠標移出, tab 保存鼠標移出時的狀態
代碼(html和js分離)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>簡易選項卡</title>
<style> body, ul, li { margin: 0; padding: 0; } body { font: 12px/1.5 Tahoma; } #outer { width: 450px; margin: 10px auto; } #tab { overflow: hidden; zoom: 1; background: #000; border: 1px solid #000; } #tab li { float: left; color: #fff; height: 30px; cursor: pointer; line-height: 30px; list-style-type: none; padding: 0 20px; } #tab li.current { color: #000; background: #ccc; } #content { border: 1px solid #000; border-top-width: 0; } #content ul { line-height: 25px; display: none; margin: 0 30px; padding: 10px 0; } </style>
</head>
<body>
<div id="outer">
<ul id="tab">
<li class="current">政治</li>
<li>八卦</li>
<li>時事</li>
</ul>
<div id="content">
<ul style="display:block">
<li class="bold-item">
<span class="dot"></span>
<a href="http://www.cankaoxiaoxi.com/roll10/bd/20160923/1315399.shtml" mon="ct=1&a=2&c=top&pn=1" target="_blank">中央批准：免去沈曉明上海市委常委、委員職務</a>
</li>
<li><a href="http://china.huanqiu.com/article/2016-09/9479605.html?from=bdwz" mon="ct=1&a=2&c=top&pn=2" target="_blank">河北省委常委、政法委書記董仚生辭去副省長職務</a></li>
<li><a href="http://www.cankaoxiaoxi.com/roll10/bd/20160923/1314362.shtml" mon="ct=1&a=2&c=top&pn=3" target="_blank">公安局紀委書記裝GPS跟蹤區委書記 獲刑3年半</a></li>
<li><a href="http://world.huanqiu.com/article/2016-09/9480050.html?from=bdwz" mon="ct=1&a=2&c=top&pn=4" target="_blank">美總統大選醜聞不斷：特朗普曝屢次挪用其基金會資金</a></li>
<li><a href="http://news.cyol.com/content/2016-09/23/content_14088428.htm" mon="ct=1&a=2&c=top&pn=5" target="_blank">六部門：電信網絡詐騙犯罪人員10月31日前要主動投案</a></li>
<li><a href="http://world.huanqiu.com/article/2016-09/9480301.html?from=bdwz" mon="ct=1&a=2&c=top&pn=6" target="_blank">外媒稱杜特爾特10月中旬將訪華 中方：期待早日成行</a></li>
</ul>
<ul>
<li class="bold-item">
<span class="dot"></span>
<a href="http://ent.ifeng.com/a/20160923/42689367_0.shtml?_zbs_baidu_news" mon="ct=1&a=2&c=top&pn=25" target="_blank">陳喬恩長文悼念喬任梁：對不起沒多關心你</a>
</li>
<li><a href="http://china.huanqiu.com/article/2016-09/9476618.html?from=bdwz" mon="ct=1&a=2&c=top&pn=26" target="_blank">媒體揭祕燕城監獄：內部到底是什麼樣子(圖)</a></li>
<li><a href="http://d.youth.cn/shrgch/201609/t20160923_8684548.htm" mon="ct=1&a=2&c=top&pn=27" target="_blank">貴州雙胞胎患病眼睛似外星人：無眼瞼瞳孔上翻</a></li>
<li><a href="http://www.cankaoxiaoxi.com/roll10/bd/20160923/1314292.shtml" mon="ct=1&a=2&c=top&pn=28" target="_blank">初中生寫做文字跡潦草 老師留評語「呆B」</a></li>
<li><a href="http://shehui.china.com.cn/2016-09/23/content_39359541.htm" mon="ct=1&a=2&c=top&pn=29" target="_blank">賭徒爲還債拍黑磚搶錢 謊稱私人恩怨從容逃脫</a></li>
<li><a href="http://xinwen.eastday.com/a/160923071129828.html" mon="ct=1&a=2&c=top&pn=30" target="_blank">陝西大三女生輕信"公檢法查洗錢案" 被騙31萬元</a></li>
</ul>
<ul>
<li class="bold-item"><a href="http://xinwen.eastday.com/a/160923071245450.html">深圳二手房賣主悔約不服判決 糾集60餘人衝擊法院</a></li>
<li><a href="http://xinwen.eastday.com/a/160923142928053.html">中國勞動保障藍皮書:今明兩年全球失業率將上升</a></li>
<li><a href="http://news.cyol.com/content/2016-09/23/content_14087297.htm" mon="ct=1&a=2&c=top&pn=9">紐約截獲450萬美圓象牙及製品 系當地史上最大</a></li>
<li><a href="http://news.ifeng.com/a/20160923/50013009_0.shtml?_zbs_baidu_news" mon="ct=1&a=2&c=top&pn=10">賴德榮被免廣西政協副主席職務 此前被降爲科員</a></li>
<li><a href="http://china.huanqiu.com/article/2016-09/9479905.html?from=bdwz " mon="ct=1&a=2&c=top&pn=11">面對人大常委會質詢，南昌市長向500多萬市民道歉</a></li>
<li><a href="http://china.huanqiu.com/article/2016-09/9480409.html?from=bdwz" mon="ct=1&a=2&c=top&pn=12">中央網信辦、民政部聯合發文 增強網信社會組織建設</a></li>
</ul>
</div>
</div>
<script src="demo.js"></script>
</body>
</html>
複製代碼
window.onload = function() {
var aLi = document.querySelectorAll("#tab li");
var aUl = document.querySelectorAll("#content ul");
for (var i = 0; i < aLi.length; i++) {
aLi[i].index = i;
aLi[i].onmouseover = function() {
for (var n = 0; n < aLi.length; n++) {
aLi[n].className = "";
}
this.className = "current";
for (var n = 0; n < aUl.length; n++) {
aUl[n].style.display = "none";
}
aUl[this.index].style.display = "block";
};
}
};
複製代碼
window.onload
- 當網頁加載完畢後, 在執行js代碼
- 這樣的話, js代碼能夠放在網頁的任何位置
document.querySelectorAll() 和 document.querySelector()
- 都是經過css選擇器, 來找對象
- 區別在於, document.querySelectorAll()返回全部匹配項
- document.querySelector()只返回符合要求的第一個元素
arr.length 獲取數組長度
匈牙利命名法和駝峯命名法
什麼是this?
- 當前動做的執行者, 當前函數的調用者
專欄地圖
- [作特效, 學JS] -- 00 開篇
- [作特效, 學JS] -- 01 超連接鼠標移入變大變紅, 鼠標移除還原
- [作特效, 學JS] -- 02 鼠標移入, div變大變紅, 鼠標移出, 回覆原貌
- [作特效, 學JS] -- 03 網頁換膚
- [作特效, 學JS] -- 04 複選框全選
- [作特效, 學JS] -- 05 複選框全選/全不選
- [作特效, 學JS] -- 06 複選框全選/全不選/反選
- [作特效, 學JS] -- 07 網頁選項卡
- [作特效, 學JS] -- 08 倒計時
- [作特效, 學JS] -- 09 正經的 全選和反選
- [作特效, 學JS] -- 10 自動生成表格
- [作特效, 學JS] -- 11 加餐-神奇的正則表達式
- [作特效, 學JS] -- 12 加餐-DOM擴展
- [作特效, 學JS] -- 13 加餐-聊聊BOM
相關文章
- 1. [作特效, 學JS] -- 03 網頁換膚
- 2. 網頁選項卡
- 3. [作特效, 學JS] -- 06 複選框全選/全不選/反選
- 4. [作特效, 學JS] -- 00 開篇
- 5. 簡單實用的網頁選項卡切換特效
- 6. 簡單純js實現網頁tab選項卡切換效果
- 7. [作特效, 學JS] -- 05 複選框全選/全不選
- 8. JS——選項卡
- 9. [作特效, 學JS] -- 08 倒計時
- 10. 網頁下雨JS特效
- 更多相關文章...
- • ionic 選項卡欄操作 - ionic 教程
- • ionic tab(選項卡) - ionic 教程
- • 適用於PHP初學者的學習線路和建議
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章