使用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学习笔记8 用JSON做原型
Jan 11 Javascript
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
JS跨域问题详解
Nov 25 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
微信小程序 自己制作小组件实例详解
Dec 22 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 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
PHP中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
apache php模块整合操作指南
2012/11/16 PHP
Codeigniter通过SimpleXML将xml转换成对象的方法
2015/03/19 PHP
php eval函数一句话木马代码
2015/05/21 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
深入浅析PHP无限极分类的案例教程
2016/05/09 PHP
使用PHP反射机制来构造&quot;CREATE TABLE&quot;的sql语句
2019/03/21 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
Javascript算符的优先级介绍
2013/03/20 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
2018/08/31 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
2019/05/14 jQuery
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
基于python的多进程共享变量正确打开方式
2018/04/28 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
苹果台湾官网:Apple台湾
2019/01/05 全球购物
应届生服务员求职信
2013/10/31 职场文书
爱岗敬业演讲稿范文
2014/01/14 职场文书
母亲节演讲稿
2014/05/27 职场文书
法人委托书的范本格式
2014/09/11 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
2014小学语文教学工作总结
2014/12/17 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript