使用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 相关文章推荐
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
判断JS对象是否拥有某种属性的两种方式
Dec 02 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
jQuery实现列表内容的动态载入特效
Aug 08 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
详解ESLint在Vue中的使用小结
Oct 15 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
JavaScript实现随机五位数验证码
Sep 27 Javascript
es6 for循环中let和var区别详解
Jan 12 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 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动态生成静态HTML网页的代码
2010/03/04 PHP
php木马webshell扫描器代码
2012/01/25 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
accesskey 提交
2006/06/26 Javascript
Ruffy javascript 学习笔记
2009/11/30 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
使用JavaScript破解web
2018/09/28 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
python实现windows壁纸定期更换功能
2019/01/21 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
PyTorch的深度学习入门教程之构建神经网络
2019/06/27 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
英国领先的杂志订阅网站:Magazine.co.uk
2018/01/25 全球购物
怎样写好自荐信和推荐信
2013/12/26 职场文书
法学个人求职信范文
2014/01/27 职场文书
知识竞赛活动方案
2014/02/18 职场文书
公司保密承诺书
2014/03/27 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
幼儿园推普周活动总结
2015/05/07 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL