CSS implements simple tab switching effect (with code)

The content of this article is about realizing a simple tab switching effect with CSS (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Using the idea of ​​anchor points, a simple tab switching effect can be achieved.

Page layout and style:

<div>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div>
  <a>1</a>
  <a>2</a>
  <a>3</a>
  <a>4</a>
</div> 

......

.box {
   height: 10em;
   border: 1px solid #ddd;
   overflow: hidden;
}
.list {
   line-height: 10em;
   background: #ddd;
}

The container is set with overflow:hidden, and the height of each list is the same as the height of the container, thus ensuring that only one list is always displayed. When we click a button, such as the third button, the anchor chain of the URL address will be changed to #three, thus triggering the anchor positioning of the third list with the id three, that is, changing the scroll height of the container to make the upper edge of list 3 Align with the top edge of the scroll container to achieve a tab effect.

But this method has certain shortcomings:

• First, the height of the container requires Fixed;

• Secondly, anchor point positioning will trigger the repositioning of the form, that is, if the page can be scrolled, the click option page will also jump

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

<div>
    <div>
<input>1</div>
    <div>
<input>2</div>
    <div>
<input>3</div>
    <div>
<input>4</div>
</div>
<div>
    <label>1</label>
    <label>2</label>
    <label>3</label>
    <label>4</label>
</div>

Written like this, even if the page form has scroll bars, in most cases, the jumping phenomenon will not occur. The principle is to insert an invisible <input> input box into each list, and then the tab button becomes a <label></label> element, and is passed ## The #for attribute is associated with the id of the <input> input box. In this way, clicking the option button will trigger the focus behavior of the input box, trigger anchor positioning, and implement options. Card switching effect.

However, if the above technology is to be used in actual projects, it cannot be separated from the support of JavaScript. One is the selection effect of the tab button, and the other is that some areas of the processing list will still jump when they are outside the browser. The problem.

Related processing is similar to the following, using jQuery syntax:

$('label.click').removeAttr('for').on('click', function() { $('.box').scrollTop(xxx); 'xxx'表示滚动数值
});

The above is the detailed content of CSS implements simple tab switching effect (with code). For more information, please follow other related articles on the PHP Chinese website!