使用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 相关文章推荐
原生JS绑定滑轮滚动事件兼容常见浏览器
Jun 30 Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 Javascript
微信小程序 本地数据读取实例
Apr 27 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
Sep 07 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
Vue.js实现的购物车功能详解
Jan 27 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 Javascript
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 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
PHP的几个常用数字判断函数代码
2012/04/24 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
制作特殊字的脚本
2006/06/26 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
python语言元素知识点详解
2019/05/15 Python
python实现证件照换底功能
2019/08/20 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
Windows 下更改 jupyterlab 默认启动位置的教程详解
2020/05/18 Python
Python extract及contains方法代码实例
2020/09/11 Python
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例
2020/12/16 Python
浅析python连接数据库的重要事项
2021/02/22 Python
波兰补充商店:Muscle Power
2018/10/29 全球购物
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
简历中个人自我评价范文
2013/12/26 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
项目安全员岗位职责
2015/02/15 职场文书
交通安全主题班会
2015/08/12 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
python如何为list实现find方法
2022/05/30 Python