点击菜单栏实现内容切换
来源:互联网 发布:象棋大师软件 编辑:程序博客网 时间:2024/04/26 06:03
html代码:
<div id="tab">
<span class="fspan">tab1 </span>
<span>tab2</span>
<span>tab3</span>
</div>
<div id="tab_con">
<li class="fli">页面一</li>
<li>页面二</li>
<li>页面三</li>
</div>
css代码:
<style>
#tab{
padding:0.8rem;
border-bottom:1px solid #eee
}
#tab span{
#tab .fspan{
color:#fabe00;
border-bottom: 2px solid #fabe00;
}
#tab_con{
color:#666;
padding:1rem;
overflow:hidden;
font-size:1.4rem;
}
#tab_con li{
display:none; //内容页默认为不可见
}
#tab_con .fli{
display:block; //当给li添加了fli的class后便显示为可见了
}
</style>
js代码:
<script>
var spans = document.getElementById("tab").getElementsByTagName("span"); //获取tab中的所有span标签赋的class的值给spans
var lis=document.getElementById("tab_con").getElementsByTagName("li"); //获取tab_con中的所有li标签的class的值赋给lis//tab点击事件
for(var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
change(this); //点击时改变其class
}
}
//改变class的函数
function change(obj) {for(var i = 0; i < spans.length; i++) {
if(spans[i] == obj) { //判断span的class是否存在
spans[i].className = "fspan"; //改变其class为fspan,同时将fspan对应的css样式赋给了这个span标签
lis[i].className = "fli"; //改变其class为fli,同时将fli对应的css样式赋给了这个li标签} else { //将class设为空,也就是说移除css样式使其不显示
spans[i].className = "";
lis[i].className = "";
}
}
}
</script>
- 点击菜单栏实现内容切换
- HTML页面左侧菜单栏切换实现右侧主体内容改变
- [Android学习笔记]fragment配合RadioGroup实现点击切换内容
- Jquery实现点击切换图片并隐藏显示内容
- 点击UITableViewCell 来回切换内容
- 用jq实现点击右边内容实现,左边内容切换、自动切换,当鼠标放上右边li上面,左边内容停止切换。
- RecyclerView实现点击切换
- iframe 点击左侧菜单栏 右侧显示相应的网页内容
- js实现两个div左右并列显示,并实现点击标题,切换内容显示
- 【js实例】js实现点击标题标签切换显示对应内容
- div 内容点击切换的小技巧
- ViewPager滑动和点击切换内容
- 点击新闻标题,内容随着标题切换
- div 内容点击切换的小技巧
- HTML5菜单栏切换实现底部滑块滑动效果实现
- JS实现点击切换事件
- Fragment实现底部菜单栏以及选项卡之间的切换
- jquery 点击函数切换 toggle() 及其其他实现点击切换
- GitHub使用(三)
- iOS应用架构谈 本地持久化方案及动态部署
- 在新开项目中需要我们完成的动作ActivityQueueManager 、BaseActivity、SharedPreferencesUtil
- 算法竞赛入门经典(第二版)-刘汝佳-第四章 函数与递归 刽子手游戏
- IE浏览器不用迅雷下载
- 点击菜单栏实现内容切换
- git安装
- 数据结构实验之链表三:链表的逆置
- SVN中trunk,branches,tags用法详解
- iOS NSKeyedArchiver序列化后进行数据持久化(swift)
- 底部按钮RadioButton、RadioGroup
- Interface In Java(Note)
- HDU 5737 Differencia(归并树)
- HDU 5738 Eureka 2016多校合练contest2