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:

Copy content to clipboard

##<

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

2. 
   ##　

   <
3. ul

   class="service-tabs-inner"> 　　<

4. li

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

5. li

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

6. li

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

li

7. ><a href="#nogo" >Shoppinga>li>##　

   ul
8. >

9. #
   p

>

11. 
    

#Tab page: tab

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

2. Layout method:

• < /p>

  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!

  Statement：

  The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
  Previous article：Examples to introduce knowledge of HTML text formattingNext article：Examples to introduce knowledge of HTML text formatting

  Related articles

  See more

  • Summary of Html knowledge
  • How to learn HTML quickly
  • The difference between html xhtml xml
  • The difference between src and href attributes
  • About HTML5 and CSS replacement use