Several implementation methods of tab bar in HTML-HTML Tutorial-php.cn

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">
##　
<
ul
class="service-tabs-inner"> 　　<
li
class="on"><a href="#nogo">Followa>li>　　<
li
><a href="#nogo ">Recommendeda>li>　<
li
>< a href="#nogo">Navigationa>li>#　　<
><a href="#nogo" >Shoppinga>li>##　
ul
>
#
p

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

##3. Template code:

1. Add background color when hovering

##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;}
width
:11px;height:7px;position:absolute;bottom bottom:-6px;left:76px;background:url(images /arrow.png);display:none;}
display
:block;}

##3. Underline

CSS Code

Copy content to clipboard

## .service-tabs2 li a:hover{

color

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

#4. Script Implementation

##JavaScript Code

Copy content to the clipboard

function

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

).click(

() { $(
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!

Related labels：

html accomplish method

source：php.cn

Previous article：Examples to introduce knowledge of HTML text formatting Next article：Analysis on the placement position of script in html

Statement of this Website

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