Several implementation methods of the tab bar (recommended)

Tabs: Category + Description

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

1. CSS naming method:

XML/HTML CodeCopy content to clipboard

< div class = "service-tabs service-tabs1" >
　　< ul class = "service-tabs-inner" >
　　　　< class = "on" > < a href = " #nogo " > Follow </a> </li>
　　　　< li > < a href = "#nogo" > Recommendation </ a > </ li >
　　　　< li > < a href = "#nogo" > Navigation </ a > </ li >
　　　　< li > < a href = "#nogo" > Shopping </ a > </ li >
　　</ ul >
</ div >

Tab: tab

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

2. Layout:

1.<ul><li> </div>
1) float: clear float overflow:hidden;/pseudo class:after/
2) display:inline-block IE7 is not compatible: *display:inline;*zoom:1; White space: font-size:0;/same line/negative margin/letter-spacing

2.<table>

3. Template code:

1. Hover and add background color

CSS CodeCopy content to clipboard

.service-tabs li a{ width : 160px ; height : 80px ; display : block ; color : #666 ; font-size : 32px ;}
.service-tabs1 li a:hover{ color : #2CC185 ;}
.service-tabs1 li.on a{ background-color : #2CC185 ; color : #fff ;} /*Background color*/

2. Small triangle, obvious

CSS CodeCopy content to clipboard

.service-tabs4 li{ position : relative ;}
.service-tabs4 li a:hover{ color : #2CC185 ;}
.service-tabs4 li.on a{ background-color : #2CC185 ; color : #fff ;}
.service-tabs4 li i{ width : 11px ; height : 7px ; position : absolute ; bottom : - 6px ; left : 76px ; background : url (images/arrow.png); display : none ;}
.service-tabs4 li.on i{ display : block ;}

3. Underline marking

CSS CodeCopy content to clipboard

.service-tabs2 li a:hover{ color : #2CC185 ;}
.service-tabs2 li.on a{ height : 78px ; border-bottom : 2px solid #2CC185 ; color : #2CC185 ;}

4. Script Implementation

JavaScript CodeCopy content to clipboard

$( function (){ $( ".service-tabs ul li" ).click( function () { $( this ).addClass( "on" ).siblings().removeClass( "on" ); }); })

Simple + Practical

The above several implementation methods of the tab bar (recommended) are all the content that the editor shares with you. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM.

<<: Detailed explanation of mkdir command in Linux learning

>>: How to remove the blue box that appears when the image is used as a hyperlink