Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 15:48:44
original
1147 Les gens l'ont consulté

2015727171350880.png (520×319)

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>

Copier après la connexion

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;
}

Copier après la connexion

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;
}

Copier après la connexion

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!