前端-选项卡（菜单栏）

项目中要用到选择卡这种思路，所以事先自己做了个demo，仅供参考：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style>* {margin: 0;padding: 0;}.main {width: 600px;margin: 100px auto;}.clearfix:after {content: '';display: table;clear: both;}.clearfix {zoom: 1;}ul {list-style: none;}li {float: left;width: 100px;height: 40px;line-height: 40px;text-align: center;}li.active{background: #ddd; //.active是一个class类}.main-content{margin-top: 40px;}.main-content .box {width: 400px;height: 400px;margin: 0 auto;border: 1px solid #ddd;display: none;}.main-content .box.active{display: block;}</style></head><body><div class="main"><ul class="clearfix list"><li class="active"><a href="javascript:;">菜单1</a></li><li><a href="javascript:;">菜单2</a></li><li><a href="javascript:;">菜单3</a></li><li><a href="javascript:;">菜单4</a></li><li><a href="javascript:;">菜单5</a></li><li><a href="javascript:;">菜单6</a></li></ul><div class="main-content"><div class="box active">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div><div class="box">5</div><div class="box">6</div></div></div></body><script type="text/javascript" src="js/jquery-1.11.2.min.js" ></script><script>$(function(){$('.list li').on('click',function(){$('.list li').removeClass('active');     $(this).addClass('active');       $('.main-content .box').removeClass('active');   $('.main-content .box').eq($(this).index()).addClass('active'); })})</script>
</html>

转载于:https://www.cnblogs.com/caojiayan/p/5934242.html

前端-选项卡（菜单栏）相关推荐

【前端】菜单栏设计（html、css）
先展示一下效果图: 目录一.代码 1.1 html 1.2 css 二.代码分析 2.1 浏览器配置 2.1.1 normalize.css 2.1.2 html5shiv 2.2 html分析 2 ...
大前端html菜单栏,9款精美别致的CSS3菜单和按钮
1.超具立体感的CSS3 3D菜单菜单项带小图标记得之前向大家分享过不少CSS3 3D菜单,比如CSS3 3D动画菜单 3D立方体菜单项和HTML5/CSS3自定义下拉框 3D卡片折叠动画,效果都 ...
如何改善虚幻引擎中的游戏线程CPU性能表现
您游戏中的帧频率是不是太低? 您了解为什么会发生这种现象吗? 这是不是由于您同时生成了太多敌人?还是由于某个特定敌人过于消耗系统资源? 是由于您设置了过多的视觉特效,还是由于您所设计的战斗系统所造成的 ...
SQL 审核查询平台
◆一.开源项目简介 Archery 定位于 SQL 审核查询平台,旨在提升 DBA 的工作效率,支持多种数据库的 SQL 上线和查询,同时支持丰富的 MySQL 运维功能. ◆二.开源协议使用Apa ...
java 李炎恢_李炎恢 jquery 66讲视频教程PDF文件完整版全集
[实例简介] 李炎恢老师在线教程66讲所用的PDF笔记课件,共16章.使用本文档可以省去记笔记的过程. 分享给大家,希望对大家有用. [实例截图] [核心代码] faae1ed4-23fe-4919- ...
使用.Net Core+Vue打造企业通用管理端
转眼间,2021年,已经不知不觉的过去了十二分之一,时间过的真的是快,快到让人害怕. 俗话说,做事情要有计划,百亿富豪,有他们自己的小目标,比如先赚十个亿:而我,就不同了,我的目标是今年打造出来一个切 ...
如何用Fritzing实现元器件自定义接线图
2019独角兽企业重金招聘Python工程师标准>>> 在用Micropython开发板完成小实验时,很多朋友反应对照接线图实际接线有时会有一些困扰.今天给大家介绍一款画图软件Fri ...
fritzing导入元件_如何用Fritzing实现元器件自定义接线图
在用Micropython开发板完成小实验时,很多朋友反应对照接线图实际接线有时会有一些困扰.今天给大家介绍一款画图软件Fritzing 看看是怎么自定义制作接线图的. 前提条件 1.准备好元器件 ...
x-admin前端模板左侧菜单栏消除记忆功能（清除缓存）
在用x-admin前端模板的时候,发现了一个问题,对于左侧的菜单栏,如果点击之后(即菜单页为展开)再退出了系统,重新登录后,发现菜单栏和退出时是一样的.如图. 而我们的要求是,退出后,再登录进来菜单页 ...

前端-选项卡（菜单栏）

前端-选项卡（菜单栏）相关推荐

最新文章

热门文章