技术标签: 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>
文章浏览阅读7.5k次,点赞28次,收藏411次。Java面试宝典(含阿里、腾迅大厂java面试真题,java数据结构,java并发,jvm等java面试真题)以100+企业大厂真实高频Java面试真题为主干,辅以数据结构的可视化展示、算法的可视化展示,窥探底层的工具使用等等可视化手段,用直观、形象的方式展现复杂的知识内容,让学生更清晰、更容易地掌握这些Java面试题与Java知识点。简单的说,就是一次大的操作由不同的小操作组成,这些小的操作分布在不同的服务器上,且属于不同的应用,分布式事务需要保证这些小操作要么全部成功,要么全部失败。
文章浏览阅读1.4k次。UE4的AI基础学习_ue4行为树
文章浏览阅读2.5k次。摘要:自互联网行业发展以来,web前端不断发展变化着。在前人的基础上,后人有幸能够站在前人的肩膀上行走。前端的发展变化不仅是继承式的迭代,同时也是不断的变革和创造。一、前端到底是个什么?简单点说,浏览器呈现出来的页面,给用户看的、操作的就是前端(客户端);你看不到的,类似一些游戏数据、应用数据之类的就是后端(服务端)。那么再简单点就可以说,前端指的就是浏览器端,后端指的就是为浏览器提供服务和数据的服务器端。这是比较准确的描述,如果往大了讲,你所有看到的一切,网页、移动端网页、小程序、甚._华为云前端发版
文章浏览阅读783次,点赞18次,收藏26次。监听DOM变化(属性变动、目标子节点变化、观察后代节点等)_mutationobserver.observe
文章浏览阅读9.8k次,点赞13次,收藏65次。freopen 和 fopen 都是C的标准库函数被包含于C标准库头文件中。fopen就是我们最熟悉的打开一个文件用于写入or读取freopen 是打开一个文件,用于接收输入输出流的数据。_freopen
文章浏览阅读3.8k次。转载自: https://blog.csdn.net/dcrmg/article/details/79546962python程序中使用 import XXX 时,python解析器会在当前目录、已安装和第三方模块中搜索 xxx,如果都搜索不到就会报错。 使用sys.path.append()方法可以临时添加搜索路径,方便更简洁的import其他包和模块。这种方法导入的路径会在python程..._sys. addpath
文章浏览阅读539次,点赞11次,收藏9次。正向的LSTM网络接受序列数据的初始状态,逐步学习前向信息并更新内部隐藏状态,最终生成前向隐藏状态序列。反向的LSTM网络则以相反的顺序处理序列数据,并生成相应的反向隐藏状态序列。本文将介绍使用Matlab实现的BiLSTM算法,并展示其在多输入单输出回归问题上的应用。然后,我们定义了BiLSTM模型的层次结构,包括序列输入层、BiLSTM层、全连接层和回归层。与传统的单向LSTM相比,BiLSTM能够同时利用序列数据的前向和后向信息,从而提高模型在长期依赖关系上的学习能力。_双向bilstm模型
文章浏览阅读295次,点赞9次,收藏11次。D78XX系列是用于各种电视机、收录机、电子仪器、设备的稳压电源电路。包括D7805、D7806、 D7808、 D7809、 D7810、 D7812、 D7815。● 输出电流大,IOMAX= 1A.● 封装形式: T0-220。● 内设过热、短路保护电路。
文章浏览阅读456次,点赞8次,收藏2次。じゃ、始めましょう。--最近在学外语,对于IT从业者来说,会是一项优势。_stm32f103c8t6csdn
文章浏览阅读7.1k次,点赞41次,收藏196次。文章目录1.Anaconda是什么2.Anaconda下载3.Anaconda安装4.Anaconda环境变量配置5.检验是否安装成功6.检验Anaconda Navifator是否安装成功7.修改Anaconda镜像修改为清华大学镜像移除清华大学镜像8.PyCharm配置Anaconda方式一(建立新的项目时)方式二(已经打开项目)9.总结1.Anaconda是什么Anaconda指的是一个开源的Python发行版本,其包含了conda、Python等180多个科学包及其依赖项。Anaconda也是P_anaconda环境变量e:\anaconda3\library\usr\bin
文章浏览阅读2k次,点赞11次,收藏44次。电脑快捷键不仅可以帮助我们熟练的操作电脑,还可以帮助我们快速提升自己的工作效率,从此跟加班说拜拜!但由于电脑快捷键过于繁多不方便我们记忆!那么今天小编为大家整理的70个Wordows、Ctrl、Alt、Shift组合快捷键,运用好的话能够帮你工作效率提升100倍!希望能为大家派上用途!下面以图片&文字的形式展现给大家!文字可以直接复制!图片也可以直接拿去收藏!..._快捷键可以帮助自己
文章浏览阅读2.2w次,点赞317次,收藏636次。明天就是女朋友的生日了, 是时候展现专属于程序员的浪漫了!你打算怎么给心爱的人表达爱意?鲜花礼物?代码表白?还是创意DIY?或者…无论那种形式,快来秀我们一脸吧!_用html做一个生日快乐网页