Verwenden Sie HTML, CSS und JS, um einen einfachen Webmenü-Schnittstellencode zu erstellen

In diesem Artikel wird hauptsächlich die Verwendung von HTML+CSS+JS zum Erstellen einer einfachen Webmenüoberfläche vorgestellt. Der in diesem ABROAD-Projekt verwendete JavaScript-Code ist sehr einfach.

Beim Schreiben des ABROAD-Projekts habe ich Tags verwendet. Tatsächlich sind Tags überall im WEB zu sehen. Das Bild zeigt den DCC-Artikelherausgeber, das Hinzufügen von ABROAD-Backend-Daten, die Baidu-Bildsuche und SF-Tags Stil zum Veröffentlichen von Blog-Artikeln – die Beschriftung ähnelt dem nativen Kontrollkästchen im Browser, aber das Kontrollkästchen ist zu hässlich. Verwenden Sie daher einfach diese einfache Methode, um es zu verschönern.

1. HTML-Code:

<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. CSS-Code (Farbe, Schriftgröße, Abstand können selbst angepasst werden):

/* 标签样式 */
.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 (der Code extrahiert auch Daten entsprechend Ihren eigenen Anforderungen; verzeihen Sie mir, dass ich die JQuery-Bibliothek für meine Widerspenstigkeit verwende ~):

// 绑定标签点击事件 @ 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;
}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

HTML5-Methode zur Verwendung von Schaltflächen zur Steuerung des Hintergrundmusikwechsels

Html und CSS zur Implementierung von reinem Text und Code für Schaltfläche mit Symbol

Das obige ist der detaillierte Inhalt vonVerwenden Sie HTML, CSS und JS, um einen einfachen Webmenü-Schnittstellencode zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!