Using HTML+CSS+JS to make a simple Web Menu interface _ Basics

Write abroad project to use the label this dongdong, in fact, the label is everywhere on the web, in turn, it shows the DCC article publisher, abroad backstage add data, Baidu image search, SF post blog post label style-tag is like a native checkbox in the browser, But the checkbox is really ugly, just use this simple method to beautify the good.

1. HTML code:

<span class= "tags" >
  <span> Economics, Finance </span>
  <span> Administration, Human capital type </span>
  <span Class= "Active" > Market, Sales </span>
  <span> Electronic Engineering It class </span>
  <span class= "Active" > Engineering class </span>
  <span> Bio-medicine </span>
  <span> Physics, Chemistry </span>
  <span> Advertising, media category </span>
  <span> language, translation </span>
</span>

2, CSS code (color, font size, spacing adjustment):

/* Label Style *
/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 code (code is also based on their own needs to extract data; Forgive me for being wild using the jquery library ~):

Binding Label Click event @ 2014-01-29 21:57:26
$ ('. tags span '). On (' click ', Function () {
  $ (this). Toggleclass (' active ');
});
 
//Read tag data @ 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 (' Please select at least one professional tag ');
  return;
}