Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use html+css+jquery to make tabs". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use html+css+jquery to make tabs.

List tab

Body {

Margin:0px

Padding:0px

}

# main {

Width:310px

Border:1pxsolid#C8C8CC

Margin-left:auto

Margin-right

: auto

Margin-top:50px

}

.main _ title {

Width:310px

Border-bottom:1pxsolid#C8C8CC

Height:30px

}

# maindiv.chang {

Border:1pxsolid#C8C8CC

Float:left

Width:153px

Height:26px

Text-align:center

Padding-top

: 4px

Cursor:pointer

}

.main _ head {

Width:310px

Height:25px

Background-color

: # FFF4F8

}

.main _ headfont {

Font-size:13px

Color:#808080

Margin-top:5px

}

.main _ content {

Width:310px

Border-top:1pxsolid#808080

}

.main _ contentul {

Margin-left:-30px

Margin-top:5px

Width:290px

}

.main _ contentulli {

List-style-type

: none

Font-size:13px

Color:#2464B2

Border-bottom:1pxdotted#808080

Line-height:27px

}

.main _ contentullia {

Font-size:13px

Color:#2464B2

Text-decoration

: none

}

.main _ contentullia:hover {

Text-decoration:underline

}

# maindivul.main_content_chang {

Width:290px

Position:relative

Z-index:100

Top:0px

Left:0px

Display:block

}

# maindivul {

Position:relative

Display:none

}

$(function () {)

$(".chang") .each (function (index) {

$(this) .click (function () {

$(this) .css ("background-color", "# E02D29")

$(this) .siblings ("div") .css ("background-color", "# fff")

$("# maindivul") .removeClass ("main_content_chang")

$(".main _ contentul:eq (" + index+ ")") .show () .siblings ("ul") .hide ()

})

})

})

Real-time hotspot

Seven days of attention

From the stars. Yours.

Privately customized

Omnipotent Star Wars.

Jiadobao accompanies tens of millions.

The girls went to class after giving birth in the toilet.

The whole history of Yuantong's life-killing express delivery.

Copy Cecilia Cheung's

Li Yanpeng lied.

170 million yuan passbook

The post-90s drowned their own daughter to please their boyfriend.

View the full list

A mysterious sword unearthed in Nanjing

Of the Civil Affairs Bureau

Wal-Mart apologized.

From the girl who bought the hairpin.

Fake Maotai cheated 200 million in loans.

The man received a Christmas gift from his dead wife.

The 100 most beautiful in the world

Meteorite 80 million

Abe visits Yasukuni Shrine

The Spring Festival Gala stage was exposed.

View the full list

At this point, I believe you have a deeper understanding of "how to use html+css+jquery to do tabs". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.