Use HTML, CSS and JS to create a simple web menu interface code

This article mainly introduces the use of HTML CSS JS to create a simple web menu interface. The JavaScript code used in this ABROAD project is very simple. Friends in need can refer to it

When writing the ABROAD project, I used tags. In fact, tags can be seen everywhere on the WEB. The picture shows the DCC article publisher, ABROAD backend data addition, Baidu image search, and SF tag style when publishing blog articles. —The label is just like the native checkbox in the browser, but the checkbox is too ugly, so just use this simple method to beautify it.

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 (color, font size, spacing can be adjusted by yourself):

/* 标签样式 */
.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 (the code also extracts data according to your own needs; forgive me for using the jquery library~):

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

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

HTML5 implements the method of using buttons to control the background music switch

Html and css implement pure text and Code for button with icon

The above is the detailed content of Use HTML, CSS and JS to create a simple web menu interface code. For more information, please follow other related articles on the PHP Chinese website!