简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  Several implementation methods of tab bar in HTML

Several implementation methods of tab bar in HTML

小云云
小云云Original
2017-12-11 11:33:354008browse

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


    ##<

  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>#　　<

    7. li

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

    ul
  8. >

  9. #
    p

    10. >


    12. #Tab page: tab

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


2. Layout method:

##1.
  • < /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;}

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

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

      5. .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

      :
      2. 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