技术标签: jquery
原理:利用自定义的num属性与内容的序号(eq() )相对应,实能够简单选中内容(在侧边栏不分块的情况下可直接使用其index()属性)
<!--可关闭的tab标签-->
<div id="aside">
<ul>
<li>
<div class="nav"><a href="javascript:;">主页</a></div>
<ul class="sum">
<li class="list" num=1><a href="javascript:;">主页一</a></li>
<li class="list" num=2><a href="javascript:;">主页二</a></li>
<li class="list" num=3><a href="javascript:;">主页三</a></li>
</ul>
</li>
<li>
<div class="nav"><a href="javascript:;">应用</a></div>
<ul class="sum">
<li class="list" num=4><a href="javascript:;">应用一</a></li>
<li class="list" num=5><a href="javascript:;">应用二</a></li>
<li class="list" num=6><a href="javascript:;">应用三</a></li>
</ul>
</li>
</ul>
</div>
<div id="tab">
菜单
</div>
<div id="content">
<div class="item" style="display: block">首页</div>
<div class="item">主页一</div>
<div class="item">主页二</div>
<div class="item">主页三</div>
<div class="item">应用一</div>
<div class="item">应用二</div>
<div class="item">应用三</div>
</div>
<script>
//侧边栏手风琴
$(".nav").click(
function(){
$(".sum").slideUp();
if($(this).next().is(":hidden")){
$(this).next().slideDown();
}
}
);
// 侧边导航菜单栏的点击事件
$('#aside .list').on('click',function () {
var num=$(this).attr('num');
var text=$(this).text();
$('.item').hide();
$('.item').eq(num).show();
//增加tab导航按钮
if(!$("#tab").text().match(text)){
var $nav=$("<div class='tab-nav' num="+num+"><a href='javascript:;'>"+text+"</a><span style='padding-left: 10px'>X</span></div>");
$("#tab").append($nav);
}
});
// 新增的tab导航栏按钮的点击事件
$('body').on('click','.tab-nav a',function (){
var num=$(this).parent().attr("num");
$('.item').hide();
$('.item').eq(num).show()
});
// 新增tab导航栏关闭按钮的点击事件
$('body').on('click','.tab-nav span',function () {
var num=$(this).parent().attr("num");
var num0=$(this).parent().prev().attr("num");
var num1=$(this).parent().next().attr("num");
$(this).parent().remove();
if($('.item').eq(num).is(":visible")){
$('.item').hide();
if(num1){
$('.item').eq(num1).show()
}
else if(num0){
$('.item').eq(num0).show()
}
else{
$('.item').eq(0).show()
}
}
})
</script>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style:none;
}
a{
text-decoration: none;
}
#aside{
position:fixed;
top:0;
left:0;
bottom: 0;
width: 100px;
background: #333333;
}
#aside a{
color: #e6e6e8;
}
#aside>ul{
padding:30px 0 0 0px;
background: black;
text-align: center;
}
.nav{
line-height: 40px;
border-bottom: 1px solid #333333;
}
.sum{
display: none;
}
.list{
font-size: 14px;
line-height: 40px;
border-bottom: 1px solid #333333;
}
#tab{
position:relative;
left:100px;
height:50px;
background: wheat;
}
#content{
position: relative;
left:110px;
}
.item{
display: none;
}
.tab-nav{
display: inline-block;
line-height:40px;
padding:0 10px
}
</style>
文章浏览阅读711次。adb(调试桥):debug工具。adb作用:借助adb工具,可以管理设备或手机模拟器状态。adb相关操作命令如下: 1. 显示系统中全部Android平台: android list targets2. 显示系统中全部AVD(模拟器): android list avd3. 创建AVD(模拟器): android create avd_android的shell命令工具:设备规范管理
文章浏览阅读769次,点赞10次,收藏7次。Centos 7.9 在线安装 VirtualBox 7.0_centos安装virtualbox
文章浏览阅读7.3w次,点赞156次,收藏636次。下载和安装java,VsCode 快速配置 java环境,教程带图简单易懂。_vscode配置java开发环境
文章浏览阅读3.1k次,点赞4次,收藏29次。Ubuntu命令大全,方便使用_ubuntu可执行文件如何用命令执行
文章浏览阅读793次。问题:java.sql.SQLException: The server time zone value ‘�й���ʱ��’ is unrecognized or represents more than one time zone. You must configure either the server or JDBC driver (via the serverTimezone con..._eclipse连接mysql 出错java.sql.sqlexception: the server time zone value
本文介绍了C/C++数组的概念和特点,以及一维数组的定义方式。数组是存放相同类型数据元素的集合,具有相同数据类型和连续内存位置的特点。文章以代码示例的方式展示了一维数组的定义和使用。
文章浏览阅读2.8k次。2017-08-02@erixhao 技术极客TechBoosterAI 机器学习第二篇 - 非线形回归分析。我们上文深入本质了解了机器学习基础线性回归算法后,本文继续研究非线性回归。非线性回归在机器学习中并非热点,并且较为小众,且其应用范畴也不如其他广。鉴于此,我们本文也将较为简单的介绍,并不会深入展开。非线性回归之后,我们会继续经典机器学习算法包括决策_非线性回归分析方法
文章浏览阅读164次。一、关系运算:1.等值比较: =语法:A=B操作类型:所有基本类型描述:如果表达式A与表达式B相等,则为TRUE;否则为FALSE举例:hive>select 1 from lxw_dual where 1=1;12.不等值比较: <>语法: A <> B操作类型:所有基本类型描述:如果表达式A为NULL,或者表..._josn mincol
文章浏览阅读767次。1 FI/SD 借口配置FI/SD通过tcode VKOA为billing设置过帐科目,用户可以创建自己的科目定义数据表。 科目是做到COA级的,通过KOFI/KOFK这两个condition type确定分别过帐到FI和CO凭证中。 由于PricingProc.是同Sale_sd 和fi 接口产生什么凭证?
文章浏览阅读229次。转:http://blog.sae.sina.com.cn/archives/981按:这几天我一直在写这篇东西,本来是胸有成竹,没想到后来越写越发现自己在这个题目下有太多话想说,而以我现在的能力又不能很好地概括总结,以至于越写越长,文章结构也变得混乱,到后来修改的时候每次都要考虑好久才能下笔,所以决定拆成两部分来发,以便阅读。这篇写得我心力交瘁,质量不算好,凑合着看吧。同样是写程序..._研发和开发
文章浏览阅读1.6k次。1.关于进程守护无非就是6.0以下,6.0以上的高版本保活a.android中6.0以下的保护采用双线程守护即可是aidl (1)创建aidl文件 interface IServiceAidlInterface { String getServiceName(); } (2)创建本地service是LocalService类实现aid..._jobintentservice跨进程
文章浏览阅读657次。FastGithub:github加速神器,解决github打不开、用户头像无法加载、releases无法上传下载、git-clone、git-pull、git-push失败等问题。_fastgithub 程序将自动关闭:系统已运行其它实例