<!DOCTYPE html><html><head><title>JavaScript & jQuery - Chapter 11: Content Panels - Tabs</title><linkrel="stylesheet"href="css/base.css" /><linkrel="stylesheet"href="css/tabs.css" /><style>/********** TABS **********/.tab-list{
margin:0;
padding:0;}.tab-listli{
display: inline-block;
list-style-type: none;
background-color:#303030;
border-bottom:3px solid #858585;
font-family:'Jacques Francois', serif;
text-transform: uppercase;
letter-spacing:0.2em;}.tab-listlia{
color:#f2f2f2;
display: block;
padding:3px 10px 3px 10px;}/********** HOVER STATES **********/.tab-listli.active, .tab-listli.hover{
background-color:#e5e5e5;
border-bottom:3px solid #e5e5e5;}.tab-listli.activea, .tab-listlia:hover{
color:#666;
background-color:#e5e5e5;}/********** PANELS **********/.tab-panel{
display: none;
background-color:#e5e5e5;
color:#666;
min-height:150px;
overflow: auto;}.tab-panel.active{
display: block;}.tab-panelp{
margin:20px;}</style></head><body><header><h1>Monsieur Pigeon</h1></header><sectionclass="page"><divclass="tabs"><ulclass="tab-list" ><liclass="active"><aclass="tab-control"href="#tab-1"><h3>Description</h3></a></li><li><aclass="tab-control"href="#tab-2"><h3>Ingredients</h3></a></li><li><aclass="tab-control"href="#tab-3"><h3>Delivery</h3></a></li></ul><divclass="tab-panel active"id="tab-1"><p>Take your tastebuds for a gentle stroll through an English garden filled with Monsieur Pigeon's beautifully fragrant Flower Series marshmallows. With three sweetly floral options: <strong>Elderberry</strong>, <strong>Rose Petal</strong>, and <strong>Chrysanthemum</strong> - all edible and all naturally flavored - they will have you dreaming of butterflies and birdsong in no time.</p></div><divclass="tab-panel"id="tab-2"><p><strong>ELDERBERRY:</strong> sugar, glucose syrup, elderberry concentrate, gelatine, natural color, cornflour, confectioner's sugar <strong>ROSE PETAL:</strong> sugar, glucose syrup, rose water, gelatine, natural color, cornflour, sugared rose petals, confectioner's sugar <strong>CHRYSANTHEMUM:</strong> sugar, glucose syrup, natural chrysanthemum extract, gelatine, natural color, cornflour, confectioner's sugar</p></div><divclass="tab-panel"id="tab-3"><p>Free postage and packaging on all orders! Due to the perishable nature of our product, we regret that we are unable to ship items internationally at this time. If you would like to find out when Monsieur Pigeon is coming to your country, please sign up for the mailing list.</p></div></div><!-- .tabs --></section><!-- .page --><scripttype="text/javascript"src="js/mylib.js" ></script><script>
(function(){//只对h3绑定事件var tabs = document.querySelectorAll('.tab-list h3');
for (var i = 0; i < tabs.length; i += 1) {
handleEvent(tabs[i], 'click', function(evt) {
deactiveAllTabs();
evt = evt || window.event;
//阻止冒泡
stopEventBubble(evt);
var target = evt.target || evt.srcElement;
var currentTab = target.parentNode.parentNode;
currentTab.setAttribute('class', 'active');
hideAllContents();
var hrefValue = target.parentNode.href;
//取#索引 var divName = hrefValue.substring(hrefValue.lastIndexOf('#') + 1);
$(divName).style.display = 'block';
});
}
} ());
functiondeactiveAllTabs() {var tabs = document.querySelectorAll('.tab-list li');
for (var i = 0; i < tabs.length; i += 1) {
tabs[i].setAttribute('class', '');
};
};
functionhideAllContents() {var divs = document.querySelectorAll('.tab-panel');
for (var i = 0; i < divs.length; i += 1) {
divs[i].style.display = 'none';
};
};