Home  >  Article  >  Web Front-end  >  Code to implement simple tabs plug-in function in jquery_jquery

Code to implement simple tabs plug-in function in jquery_jquery

WBOY
WBOYOriginal
2016-05-16 18:10:081098browse

Getting back to business, here is the full text.

Attached are the two simplest renderings first.

Code to implement simple tabs plug-in function in jquery_jquery

Code to implement simple tabs plug-in function in jquery_jquery

Start by writing simple HTML code. UL tag used as tabs and p tag containing content.

For the sake of simplicity, I will just write Three.

Today, I watched the snow drifting by in the cold night. Floating far away with a cooled heart... still free and self-singing my song forever, traveling thousands of miles.

The bell rang as a signal to return home, which seemed to bring a bit of sadness in his life... Confidence can change the future, who can do it?

A match that cannot be modified, with warmth always behind my back... Please allow me to say, I really love you.

All appearances do not require images, just keep them simple, so they all use CSS. Here I will choose the more important ones to write.

li{float:left;}

a{display:block;border:solid 1px #000;}

div{border:solid 1px #000;margin-top=-1px;}

.selected{border-bottom-color:#FFF; color:#F00;}//Set the border color at the bottom of the selected tab to the same color as the content background

The highlight is here, that is how to implement the tabs function with simple jquery.

Copy code The code is as follows:




The above is the complete content. If you are interested, you can test it out. Thank you all.

Statement:
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