Utilisez HTML, CSS et JS pour créer un code d'interface de menu Web simple

Cet article présente principalement l'utilisation de HTML+CSS+JS pour créer une interface de menu Web simple. Le code JavaScript utilisé dans ce projet À L'ÉTRANGER est très simple. Les amis dans le besoin peuvent s'y référer

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 de l'article DCC, l'ajout de données backend ABROAD, la recherche d'images Baidu et les balises SF. publier des articles de blog. Style - l'étiquette ressemble à la case à cocher native du navigateur, mais la case à cocher est trop moche, alors utilisez simplement 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, 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;
}

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Méthode HTML5 d'utilisation de boutons pour contrôler le commutateur de musique de fond

Html et CSS pour implémenter du texte pur et Code pour le bouton avec l'icône

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!