Several implementation methods of tab bar in HTML

There are many uses of tags in HTML. This article recommends several implementation methods for the tag bar. It is very useful for learning tag knowledge. I hope it can help everyone.

Tag page: Category + Description

Tag bar: Category=>Let users understand where they are and where they are going

##1. CSS naming method:

##XML/HTML Code

Copy content to clipboard

##

p class ="service-tabs service-tabs1">

1. 
   ##　

2. ul

   class="service-tabs-inner"> 　　

3. li

   class="on">a href="#nogo">Followa>li>　　

4. li

   >a href="#nogo ">Recommendeda>li>　

5. li

   >a href="#nogo">Navigationa>li>#　　

li

6. >a href="#nogo" >Shoppinga>li>##　

   ul
7. >

8. #

   
   p

>

10. 
    

#Tab page: tab

Advantages: 1. Easy to search 2. Comply with SEO standards

2. Layout method:

##1.

• 1) float: clear float overflow:hidden;/pseudo-class:after/

  2) display:inline-block IE7 is not compatible: *display:inline;*zoom:1; blank interval: font font -size:0;/same line/negative margin/letter-spacing

  2.

  ##3. Template code:

  
  
  1. Add background color when hovering

  ##CSS CodeCopy content to clipboard

  
  

  
  

  ##.service-tabs li a{

  width:160px;height

  :

  80px
  ;

  display
  :
  1. block

     ;color:#666;font-size :32px;}

  2. .service-tabs1 li a:hover{color:#2CC185;}

  3. .service -tabs1 li.on a{background-color:#2CC185;color:#fff;} /*Background Color*/

  
  

  
  

  

  #2. Small triangle, Obvious

  
  

  CSS CodeCopy content to clipboard

  
  

  1. .service-tabs4 li{

     position:relative;}

  2. .service-tabs4 li a:hover{

     color:#2CC185;}

  3. .service-tabs4 li.on a{

     background-color:#2CC185;color:#fff;}

  ##.service-tabs4 li i{
  4. width

     :11px;height:7px;position:absolute;bottom bottom:-6px;left:76px;background:url(images /arrow.png);display:none;}

  .service-tabs4 li.on i{
  5. display

     :block;}

  
  

  ##3. Underline

  
  CSS Code

  Copy content to clipboard

  
  ## .service-tabs2 li a:hover{

  color
  :
  1. #2CC185

     ;} ##.service-tabs2 li.on a{height

     :
  78px
  2. ;

     border-bottom:2px solid #2CC185; color:#2CC185;}

  
  

  #4. Script Implementation

  ##JavaScript Code

  Copy content to the clipboard

  
  

  $(

  function

  (){ $(
  ".service-tabs ul li"

  ).click(
  function
  1. () { $(

     this).addClass("on").siblings().removeClass("on"); } ); }) It is simple and very practical. Have you learned it? Hurry up and get your hands dirty. Related recommendations:

  html How to use the img tag

  ##HTML5 new tag usage method
  

  htmlCommonly used format tags

The above is the detailed content of Several implementation methods of tab bar in HTML. For more information, please follow other related articles on the PHP Chinese website!