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

This article will explain in detail how to achieve the simple tab switching effect of CSS. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Page layout and style:

one

two

three

four

one

two

three

four

.

.box {

Height:10em

Border:1pxsolid#ddd

Overflow:hidden

}

.list {

Line-height:10em

Background:#ddd

}

The container is set to overflow:hidden, and each list is as high as the container, which ensures that only one list is always displayed. When we click the button, such as the third button, we will change the anchor chain of the URL address to # three, thus triggering the anchor location where id is the third list of three, that is, changing the scrolling height of the container to align the upper edge of listing 3 with the upper edge of the scrolling container, thus achieving the tab effect.

3372313660-5bfce3b04c4e2_articlex.png

But this approach has some shortcomings:

First, the height of the container needs to be fixed

Second, anchor positioning will trigger the relocation of the form, that is, if the page can be scrolled, then clicking on the options page will also jump.

In order to change this situation, use the following ways. The page layout is:

one

two

three

four

one

two

three

four

In this way, even if the page form has a scroll bar, in most cases, it will not jump. The principle is to insert an invisible input box into each list, and then the tab button becomes an element and is associated with the id of the input box through the for attribute, so that clicking the option button will trigger the focus behavior of the input box, trigger anchor positioning, and achieve tab switching effect.

However, the above technology can not be used in the actual project without the support of JavaScript, one is the selected effect of the tab button, and the other is to deal with the problem that some areas of the list will still jump when they are outside the browser.

The related processing is similar to the following, using the jQuery syntax:

$('label.click'). RemoveAttr (' for'). On ('click',function () {$(' .box') .scrollTop (xxx); 'xxx' represents a scrolling value

})

This is the end of this article on "how to achieve simple tab switching effect in CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.