用HTML CSS JS做一个简单的网页菜单界面

标签用于编写扩展项目。事实上，标签在网络上随处可见。图为DCC文章发布者、Expand后台添加数据、百度图片搜索、sf发布博客文章时的标注风格。——标签就像浏览器中原来的复选框，但是复选框真的很丑，所以就用这个简单的方法来美化它。

1.HTML代码：

Span class=' tags经济、财务/span管理、人力资源/span span class=' active '营销、销售/span span电子工程IT /span span class='active '工程/span span生物医学/span物理、化学/span span广告、媒体/span span语言、翻译/span/span2、CSS代码(自动调整颜色、字体大小和间距):

/*标签样式*/。tag span { font : 12px/22px ' Microsoft yahei '，arial，lucida grande，Tahomaborder: 1px #E3E0D9实心；display:内联块；height: 20px背景： # FFF；文本对齐：中心；padding: 2px 7pxmargin: 1px 4pxcursor:指针；-WebKit-transit : all . 3s简易版；-moz-transit : all . 3s简易版；飞越：隐藏；color: # 989898}.标记span : hover { border-color : # 00956d；}.标签span . active { color : # FFF；边框颜色： # 00956d；背景色： # 00956d；}3.JS代码(代码也根据自己的需要提取数据；原谅我放荡不羁地使用jquery库~):

//绑定标签点击事件@ 2014-01-29 21:57:26 $(')。标签跨度')。on ('click ')，function () {$ (this)。切换类(“活动的”)；});//@ 2014-01-29 23:12336035 vartag _ content='，'读取标签数据时；$('.标签跨度')。每个(函数(k，v) { if($(v))。has class(' active '){ tag _ content=$(v)。text()'，'；}});If(tag_content=='，'){ alert('请至少选择一个专业标签')；返回；}