[Lynda.com] Create a Sliding Tabbed Panel with jQuery
Category: Tutorials
- views: 2 222
- date: 1 November 2012
- posted by: pm1
![[Lynda.com] Create a Sliding Tabbed Panel with jQuery [Lynda.com] Create a Sliding Tabbed Panel with jQuery](http://i46.fastpic.ru/big/2012/1101/43/2cf147efae639d39118391578563ab43.jpg)
[Lynda.com] Create a Sliding Tabbed Panel with jQuery
QuickTime (.mov) | AVC 960x540 15fps 200Kbps | AAC 48kHz 2ch 96Kbps | 260 Mb
58m 31s | 11 october 2012 | Software works on: Mac and Windows
QuickTime (.mov) | AVC 960x540 15fps 200Kbps | AAC 48kHz 2ch 96Kbps | 260 Mb
58m 31s | 11 october 2012 | Software works on: Mac and Windows
A tabbed panel interface is a classic feature to incorporate in your website design, but they're usually static elements. This course shows how to build a dynamic sliding tabbed panel from scratch using a combination of HTML, CSS, and jQuery. Author Chris Converse leads you through the process from start to finish, from building the containers to styling the text, tab, and panels, and adding click events to make the tabs interactive. He also shows how to incorporate progressive enhancement techniques, so visitors who don't have javascript, for example, can still access the content.
Topics include:
Creating the main panel and tab containers
Adding content to the containers
Adding CSS styles to the text and tabs
Adding the jQuery $(document).ready() function
Assigning click events to the tabs
Setting an autostart on page load
Creating custom graphics for the panels
Assigning custom classes to the HTML elements
Reassigning CSS rules with javascript
![[Lynda.com] Create a Sliding Tabbed Panel with jQuery [Lynda.com] Create a Sliding Tabbed Panel with jQuery](http://i46.fastpic.ru/big/2012/1101/af/f17d4ff61795a17a73b20046888178af.jpg)
We need your support!
Make a donation to help us stay online
Bitcoin (BTC)
bc1q08g9d22cxkawsjlf8etuek2pc9n2a3hs4cdrld
Bitcoin Cash (BCH)
qqvwexzhvgauxq2apgc4j0ewvcak6hh6lsnzmvtkem
Ethereum (ETH)
0xb55513D2c91A6e3c497621644ec99e206CDaf239
Litecoin (LTC)
ltc1qt6g2trfv9tjs4qj68sqc4uf0ukvc9jpnsyt59u
USDT (ERC20)
0xb55513D2c91A6e3c497621644ec99e206CDaf239
USDT (TRC20)
TYdPNrz7v1P9riWBWZ317oBgJueheGjATm
Information |
|||
![]() |
Users of GUESTS are not allowed to comment this publication. | ||









