本文摘自PHP中文网,作者不言,侵删。
这篇文章主要介绍了使用HTML+CSS+JS制作简单的网页菜单界面,这个ABROAD项目所使用的JavaScript部分代码非常简单,需要的朋友可以参考下 写ABROAD项目用到了标签这个东东,其实标签在WEB上到处可见,图中就依次显示了DCC文章发布器、ABROAD后台添加数据、百度图片搜索、sf发布博客文章时贴标签的样式――标签就像浏览器里原生的checkbox一样,不过checkbox实在太丑了,就使用这个简单方法美化一下好了。
1、HTML代码:
1 2 3 4 5 6 7 8 9 10 11 | < 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代码(颜色、字体大小、间距自行调整):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .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 . 3 s ease-in-out;
-moz-transition: all . 3 s 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库~):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $( '.tags span' ).on( 'click' , function (){
$( this ).toggleClass( 'active' );
});
var tag_content = ',' ;
$( '.tags span' ).each( function (k, v) {
if ($(v).hasClass( 'active' )){
tag_content += $(v).text()+ ',' ;
}
});
if ( tag_content== ',' ){
alert( '请至少选择一个专业标签' );
return ;
}
|
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!
相关推荐:
HTML5实现使用按钮控制背景音乐开关的方法
Html和css实现纯文字和带图标的按钮的代码
以上就是用HTML和CSS以及JS制作简单的网页菜单界面的代码的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript怎么去除小数点后的数
javascript是一门什么样的语言
如何理解javascript的对象
js绘制两个相交的矩形并且其中有一个包含透明度
javascript怎么将对象转换为数组
es6中新的变量声明方式介绍(附代码)
js数组学习之清空全部元素的4种方法(代码详解)
js的dom与事件小结
javascript用哪个关键字声明变量
javascript中删除数组元素的方法有哪些
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 用HTML和CSS以及JS制作简单的网页菜单界面的代码