使用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 相关文章推荐
在线游戏大家来找茬II
Sep 30 Javascript
使用JS操作页面表格,元素的一些技巧
Feb 02 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
JS的参数传递示例介绍
Feb 08 Javascript
jQuery背景插件backstretch使用指南
Apr 21 Javascript
AngularJS使用angular.bootstrap完成模块手动加载的方法分析
Jan 19 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
vue如何使用rem适配
Feb 06 Vue.js
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下使用brew配置环境的步骤分享
2011/05/23 PHP
php更新修改excel中的内容实例代码
2014/02/26 PHP
php中的动态调用实例分析
2015/01/07 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
JS trim去空格的最佳实践
2011/10/30 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
python使用正则表达式匹配字符串开头并打印示例
2017/01/11 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
.NET现在共支持多少种语言
2014/02/26 面试题
成教自我鉴定
2013/10/27 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
体育教师求职信
2014/06/30 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
股东大会通知
2015/04/24 职场文书