UI模式：标签页
标签页模式的实现机制
标签页是网页设计中被广泛使用到的一种UI模式。通过这个示例，我们将了解：
- 用jQuery定位到特定的DOM元素；
- 用jQuery修改元素的CSS样式；
- 在jQuery中绑定click事件。
HTML结构
<div id="tabdemo" class="tabdemo">
<ul class="tabs">
<li id="tab1"><a href="#">Tab1</a></li>
<li id="tab2"><a href="#">Tab2</a></li>
<li id="tab3"><a href="#">Tab3</a></li>
</ul>
<div class="cntbox">
<div id="content1" class="cnt">Content1</div>
<div id="content2" class="cnt">Content2</div>
<div id="content3" class="cnt">Content3</div>
</div>
</div>
效果图
确定交互行为逻辑：在CSS中，为标签的普通状态与高亮状态分别定义两组样式，通过一个名为active的class值进行区分；如果需要高亮某个标签并显示相应内容，就在对应的DOM元素上添加一个class值“active”，同时将其它标签DOM元素上的active值去除。
| When | Who | What |
|---|---|---|
| Tab1被点击 | $("#content1") | addClass("active") |
| $("#content2") $("#content3") |
removeClass("active") | |
| Tab2被点击 |
$("#content2") | addClass("active") |
| $("#content") $("#content3") |
removeClass("active") | |
| Tab3被点击 | $("#content3") | addClass("active") |
| $("#content1") $("#content2") |
removeClass("active") | |
| 页面初始化 | $("#content1") | addClass("active") |
| $("#content2") $("#content3") |
removeClass("active") | |
| $("#tab1 a") $("#tab2 a") $("#tab3 a") |
绑定点击事件处理 on("click",function(e){}) |
效果
Content1
Use when there are more than 2 sections Use when there less than 8-10 sections depending on the length of each section name. Use when section names are relatively short Use when you want the navigation to fill the entire width of a page Use when you want to provide a list of the highest available sections/subsections of the website Do not use when wanting to show content-specific data.
Content2
A horizontal bar contains the different sections or categories of your website. Each section or category is represented by a tab that resembles a button. This is why the whole button should be clickable, and not just the text that labels the section. Optionally, a bar below the top bar can contain subsections of the currently selected item in the top bar The same navigation tab is used on all pages that is linked from the navigation tab. The same structure (order) of the navigation tabs should be maintained from page to page, so that the user can relate the navigation of the different pages to each other.
根据给定的HTML利用jQuery实现下面的标签页设计。（下载PDF设计稿）
给出的HTML代码如下，注意不要改动HTML代码。
<div id="tabheading">
<ul>
<li id="sunflowertab1"><a href="#">标签一</a></li>
<li id="sunflowertab2"><a href="#">标签二</a></li>
<li id="sunflowertab3"><a href="#">标签三</a></li>
</ul>
<div id="sunflowercnt1">标签一的内容。</div>
<div id="sunflowercnt2">向日葵（学名：Helianthus annuus）别名太阳花，是菊科向日葵属的植物。因花序随太阳转动而得名。向日葵花语为爱慕、光辉、高傲之意，仰慕、凝视着你。向日葵（学名：Helianthus annuus）别名太阳花，是菊科向日葵属的植物。因花序随太阳转动而得名。向日葵花语为爱慕、光辉、高傲之意，仰慕、凝视着你。</div>
<div id="sunflowercnt3">标签三的内容。</div>
</div>
小提示：
- 向日葵图片最好采用背景而不是img标签的方式实现，因为它只是文档中的“表现信息”；
- 圆角标签应具备一定的弹性，并能随这标签文本长度的变化而自动伸缩。