First look at the effect:
The Jquery-ui tab is actually made using the principle of Anchor link, which is very simple to implement.
First step: introduce jquery and Jquery-ui files.
Here is the code for my Head section:
Step Two: write the layout of the panel.
<body>
<div id= "tab" >
<ul>
<li><a href= "#tab-1" class= "isslected" >tab1 </a></li>
<li><a href= "#tab-2" class= "unslected" >TAB2</a></li>
< Li><a href= "#tab-3" class= "unslected" >TAB3</a></li>
</ul>
<div id= "Tab-1" >TAB1 Content-People's Daily Beijing December 9 (Tangjia) this week, Tianjin as the party committee, the city's secretary;</div>
<div id= "tab-2" >tab2 Content-Hunan province, 12 People's Congress closed the six sessions, Hudazhe, governor of Hunan Province, was elected governor.
Beijing, Tianjin, Shanghai, Hubei Provincial party committee to usher in a new member: Beijing deputy Mayor Linqueqing as the Standing Committee of the Municipal Committee, the central State organs of the Secretary Deng Xiuming "Airborne" </div>
<div id= "tab-3" > TAB3 Content-Shanghai deputy mayor of Shanghai Municipal Committee of the Standing Committee, vice governor of Hubei province Ninzeng, Shiyan party committee secretary Zhou Yi as Hubei Provincial party committee. </div>
</div>
</body>
Which id= "tab" Div used to wrap our entire tab, UL content is that we click on the part of the switch content, UL below the DIV is when we switch the contents of the tab display.
One of the tags href= "#tab-1", href= "#tab-2", href= "#tab-3", respectively corresponding to the id= "Tab-1", id= "Tab-2", id= "tab-3." The style of the tab and the effect of clicking on it we can define what we want.
Step Three: write the script.
Here we also have to start running our code after the DOM load is complete, select our tab, and use the. Tabs () method to implement the TAB function.
$ (function () {
$ ("#tab"). tabs ();
A very simple few steps to achieve a simple tab function, the specific style effect can be written according to their own needs.
This example is attached to the source address: Https://github.com/nongweiyi/csdnBlogProjects/tree/master/Jquery-UI/tab
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
