使用HTML+CSS+JS制作简单的网页菜单界面


Posted in Javascript onJuly 27, 2015

使用HTML+CSS+JS制作简单的网页菜单界面

 写ABROAD项目用到了标签这个东东,其实标签在WEB上到处可见,图中就依次显示了DCC文章发布器、ABROAD后台添加数据、百度图片搜索、sf发布博客文章时贴标签的样式——标签就像浏览器里原生的checkbox一样,不过checkbox实在太丑了,就使用这个简单方法美化一下好了。

1、HTML代码:

<span class="tags">
  <span>经济、金融类</span>
  <span>行政、人资类</span>
  <span class="active">市场、销售类</span>
  <span>电子工程IT类</span>
  <span class="active">工程类</span>
  <span>生物医药类</span>
  <span>物理、化学类</span>
  <span>广告、传媒类</span>
  <span>语言、翻译类</span>
</span>

2、CSS代码(颜色、字体大小、间距自行调整):

/* 标签样式 */
.tags span {
  font: 12px/22px 'Microsoft Yahei',Arial,Lucida Grande,Tahoma;
  border: 1px #E3E0D9 solid;
  display: inline-block;
  height: 20px;
  background: #FFF;
  text-align: center;
  padding: 2px 7px;
  margin: 1px 4px;
  cursor: pointer;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  overflow: hidden;
  color: #989898;
}
.tags span:hover {
  border-color: #00956d;
}
.tags span.active {
  color: #FFF;
  border-color: #00956d;
  background-color: #00956d;
}

3、JS代码(代码也是根据自己的需求提取数据;原谅我放荡不羁使用了jquery库~):

// 绑定标签点击事件 @ 2014-01-29 21:57:26
$('.tags span').on('click', function(){
  $(this).toggleClass('active');
});
 
// 读取标签数据时 @ 2014-01-29 23:12:35
var tag_content = ',';
$('.tags span').each(function(k, v) {
  if($(v).hasClass('active')){
    tag_content += $(v).text()+',';
  }
});
if( tag_content==',' ){
  alert('请至少选择一个专业标签');
  return;
}
Javascript 相关文章推荐
实现JavaScript中继承的三种方式
Oct 16 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 Javascript
鼠标滚轮控制网页横向移动实现思路
Mar 22 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
Oct 22 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
Nov 24 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
Jul 27 #Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 #Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 #Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 #Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 #Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 #Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 #Javascript
You might like
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
PHP利用curl发送HTTP请求的实例代码
2020/07/09 PHP
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
2010/08/27 Javascript
Extjs4中Form的使用之本地hiddenfield
2013/11/26 Javascript
关于js中for in的缺陷浅析
2013/12/02 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
javascript实现点击星星小游戏
2019/12/24 Javascript
如何使用jQuery操作Cookies方法解析
2020/09/08 jQuery
Python Tkinter GUI编程入门介绍
2015/03/10 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
利用python在excel中画图的实现方法
2020/03/17 Python
python 进制转换 int、bin、oct、hex的原理
2021/01/13 Python
师范生的个人求职信范文
2014/01/04 职场文书
电工工作职责范本
2014/02/22 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
廉洁自律承诺书
2014/03/27 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
幼儿园见习总结
2015/06/23 职场文书
村主任当选感言
2015/08/01 职场文书
2016三八妇女节校园广播稿
2015/12/17 职场文书
《中彩那天》教学反思
2016/02/24 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书
游戏开发中如何使用CocosCreator进行音效处理
2021/04/14 Javascript
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript
JavaScript实例 ODO List分析
2022/01/22 Javascript