[作特效, 学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大特性解读
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 跳槽面试的几个实用小技巧，不妨看看！
- 2. Mac实用技巧 |如何使用Mac系统中自带的预览工具将图片变成黑白色?
- 3. Mac实用技巧 |如何使用Mac系统中自带的预览工具将图片变成黑白色?
- 4. 如何使用Mac系统中自带的预览工具将图片变成黑白色?
- 5. Mac OS非兼容Windows软件运行解决方案——“以VMware & Microsoft Access为例“
- 6. 封装 pyinstaller -F -i b.ico excel.py
- 7. 数据库作业三ER图待完善
- 8. nvm安装使用低版本node.js(非命令安装)
- 9. 如何快速转换图片格式
- 10. 将表格内容分条转换为若干文档
欢迎关注本站公众号,获取更多信息
相关文章