<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}

html,
body {
width: 100%;
height: 100%;
font-size: 16px;
font-family: "微软雅黑";
}

ul,
li {
list-style: none;
}

.box {
width: 100%;
height: 100%;
background: lightblue;
}

.box header {
width: 100%;
height: 60px;
background: lightcoral;
}

.logo {
width: 100px;
height: 100%;
background: blue;
float: left;
line-height: 60px;
text-align: center;
}

.nav {
height: 100%;
float: left;
}

.nav li {
float: left;
height: 100%;
width: 50px;
line-height: 60px;
text-align: center;
}

.edit {
float: left;
height: 100%;
width: 50px;
line-height: 60px;
background: lavender;
text-align: center;
position: relative;
}

.edit .selectBox {
display: none;
width: 200px;
/*height: 200px;*/
position: absolute;
top: 60px;
left: 0;
background: lightseagreen;
z-index: 999;
}

.selectBox .selected {
width: 100%;
height: 100px;
background: lightsteelblue;
}

.selectBox .unselected {
width: 100%;
height: 100px;
background: lightgray;
}

.selectBox .selectTitle {
height: 20px;
line-height: 20px;
text-align: center;
}

.selectBox li {
width: 60px;
height: 30px;
float: left;
border: 1px solid #333;
font-size: 12px;
line-height: 30px;
margin: 2px;
position: relative;
}

.selectBox li i {
font-style: normal;
position: absolute;
right: 0;
top: 0;
width: 12px;
height: 12px;
background: yellowgreen;
line-height: 10px;
font-size: 12px;
}

.btn span {
float: left;
width: 50%;
height: 30px;
line-height: 30px;
}

.btn span:nth-of-type(1) {
border-right: 1px solid #333;
box-sizing: border-box;
}
</style>
</head>

<body>
<div class="box">
<header>
<div class="logo">logo</div>
<ul class="nav">
<li>首页</li>
<li>邮件</li>
</ul>
<div class="edit">
+
<div class="selectBox">
<div class="selected">
<p class="selectTitle">已选择</p>
<ul class="selectedCon">
<li class="fixedItem">首页</li>
<li class="fixedItem">邮件</li>
</ul>
</div>
<div class="unselected">
<p class="selectTitle">未选择</p>
<ul class="unselectedCon">
<li><span>人事</span></li>
<li><span>IT</span></li>
<li><span>工号</span></li>
</ul>
</div>
<div class="btn"><span id="confirm">确定</span><span id="cancel">取消</span></div>
</div>
</div>
</header>
</div>

<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script>
$(".edit").click(function() {
$(".selectBox").show();
})
$(".selectBox ul").on("click", "i", function() {
$(".unselectedCon").append($(this).parent()) //点击已选择的x把此元素移到未选择里并去掉x return false是阻止冒泡 下同
$(".unselectedCon i").remove();
return false;
})
$(".unselectedCon").on("click", "li", function() {
$(".selectedCon").append($(this)) //点击未选择元素将它移到已选择里并加上x
$(".selectedCon li:not('.fixedItem')").append("<i>x</i>");
return false;
})
// $(".selectedCon li:not('.fixedItem')").on("click", "i", function() {
// $(".unselectedCon").append($(this))
// return false;
// })
$("#confirm").click(function() {
$(".nav").html("<li>首页</li><li>邮件</li>"); //每次点确定都把nav恢复成只有首页 和 邮件
var n = $(".selectedCon li").length;
for(var m = 2; m < n; m++) { //从已选择的第三个开始 把各个元素加到nav
var con = $(".selectedCon li").eq(m).find("span").html();
$(".nav").append("<li>" + con + "</li>");
}
$(".selectBox").hide();
return false;
})
$("#cancel").click(function() {
$(".selectBox").hide();
return false;
})
</script>
</body>

</html>

navDemo的更多相关文章

  1. react-native 简单的导航

    默默潜水了两年了,一直都在看大神们写的博客,现在我也分享一下跟RN导航有关的东西. 前两年我主要是做iOS开发的,现在刚找了份工作,应公司要求,现在开始学习reactnative的东西,由于我以前没怎 ...

  2. Win10 UWP 开发系列：使用SplitView实现汉堡菜单及页面内导航

    在Win10之前,WP平台的App主要有枢轴和全景两种导航模式,我个人更喜欢Pivot即枢轴模式,可以左右切换,非常方便.全景视图因为对设计要求比较高,自己总是做不出好的效果.对于一般的新闻阅读类Ap ...

  3. 《免费前端教程不会告诉你这些》知乎LIVE读后感

    这个是昨天偶然间在知乎上看到的一个知乎LIVE,答题就是音频在线直播吧,我试听了一下觉得分享的还不错,就买了完整的.主讲人叫方应杭,貌似是个挺牛逼的程序猿,之前没有听过,但这是个典型的科班出生的程序员 ...

  4. 【CSS3】 - 初识CSS3

    .navdemo{ width:560px; height: 50px; font:bold 0/50px Arial; text-align:center; margin:40px auto 0; ...

  5. HTML 5中的结构元素

    1.header:标记头部区域的内容 .footer:标记页脚区域的内容 .section:Web页面中的一块区域 4.article:独立的文章内容区域 5.aside:相关侧边内容或者引文区域 6 ...

  6. js 简单制作键盘模拟

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head& ...

随机推荐

  1. CentOS下Apache开启Rewrite功能

    1.centos的配置文件放在: /etc/httpd/conf/httpd.conf 打开文件找到: LoadModule rewrite_module modules/mod_rewrite.so ...

  2. 炉石ZZ操作 [20161224]

    昨天吃完晚饭,开了一盘炉石.选的龙牧,遇到对面马克扎尔战士. 中途,我场上3个较大随从,他突然先拍下一个铜须,菊花一紧,然后果然拍下了大工匠(之前用龙人侦察者看到他牌库有这张牌),逗比的一幕开始了,首 ...

  3. C#中属性与字段的用法

    //People.cs public class People { //字段 private string _name; //属性 作用:保护字段,对字段的取值和赋值进行限定,限制非法字段的摄入 pu ...

  4. [Linux编程] module_param()函数学习笔记

    在读TCP cubic源码中,遇到了module_param(),网上查到的资料如下: 在用户态下编程可以通过main()来传递命令行参数,而编写一个内核模块则可通过module_param()来传递 ...

  5. 支持Java Spring MVC

    Java Spring MVC能很方便在后台返回JSON数据,所以与MiniUI进行数据交互非常简单. 1)后台处理: 在MVC控制器中,可以通过方法参数接收数据,也可以通过Request接收更复杂的 ...

  6. spark-shell和scala错误

    运行spark-shell 或者scala命令,出现以下错误: Welcome to Scala version 2.10.6 (Java HotSpot(TM) 64-Bit Server VM, ...

  7. sqlldr

    1.字符集 sqlldr可以指定读取的文件的字符集,如果数据库为gbk,读取的文件为utf-8,这个时候就需要指定字符集 load data CHARACTERSET 'UTF8' 2.sqlldr导 ...

  8. 阿里云 esc 云服务器无缘无故的一次/usr/bin 目录丢失导致整个服务无法启动 # ./shutdown.sh ./shutdown.sh: line 41: dirname:command not found cannot find /catalina.sh the find /catalina.sh The file is absent or does not have execute

    总结上个星期服务器环境上的一个问题,一直再忙AR.防近视的项目没时间整理.刚好忙完项目认真回顾8月30发生的一个让人奇葩的问题. 早上把项目上的一些问题优化完,快到中午吃饭的时间频繁的启动导致/usr ...

  9. ubuntu访问supermicro ikvm

    https://www.digitalocean.com/community/tutorials/how-to-install-java-with-apt-get-on-ubuntu-16-04 安装 ...

  10. C语言中内存操作函数

      一.malloc/calloc 名称: Malloc/calloc 功能: 动态内存分配函数 头文件: #include <stdlib.h> 函数原形: void *malloc(s ...