Utilisez HTML CSS JS pour créer une interface de menu Web simple_Connaissances de base

Lors de l'écriture du projet ABROAD, j'ai utilisé des balises. En fait, les balises peuvent être vues partout sur le WEB. L'image montre l'éditeur d'articles DCC, l'ajout de données backend ABROAD, la recherche d'images Baidu et le style de balise SF lors de la publication d'articles de blog. . —La balise ressemble à la case à cocher native du navigateur, mais la case à cocher est trop moche, alors utilisez cette méthode simple pour l'embellir.

1. Code 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. Code CSS (la couleur, la taille de la police et l'espacement peuvent être ajustés par vous-même) :

/* 标签样式 */
.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. Code JS (le code extrait également les données selon vos propres besoins ; pardonnez-moi d'utiliser la bibliothèque 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;
}