2024年04月06日 个人博客 响应式 切换标签 懒猪技术
Html
<div id="tabs" class="tabs"> <nav> <ul> <li><a href="#section-1" class="icon-shop"><span>Shop</span></a></li> <li><a href="#section-2" class="icon-cup"><span>Drinks</span></a></li> <li><a href="#section-3" class="icon-food"><span>Food</span></a></li> <li><a href="#section-4" class="icon-lab"><span>Lab</span></a></li> <li><a href="#section-5" class="icon-truck"><span>Order</span></a></li> </ul> </nav> <div class="content"> <section id="section-1"> <div class="mediabox"> <img src="img/01.png" alt="img01" /> <h3>Sushi Gumbo Beetroot</h3> <p>Sushi gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</p> </div> <div class="mediabox"> <img src="img/02.png" alt="img02" /> <h3>Pea Sprouts Fava Soup</h3> <p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.</p> </div> <div class="mediabox"> <img src="img/03.png" alt="img03" /> <h3>Turnip Broccoli Sashimi</h3> <p>Nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. Bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip.</p> </div> </section> <section id="section-2"> <div class="mediabox"> <img src="img/04.png" alt="img04" /> <h3>Asparagus Cucumber Cake</h3> <p>Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. </p> </div> <div class="mediabox"> <img src="img/05.png" alt="img05" /> <h3>Magis Kohlrabi Gourd</h3> <p>Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.</p> </div> <div class="mediabox"> <img src="img/06.png" alt="img06" /> <h3>Ricebean Rutabaga</h3> <p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. </p> </div> </section> <section id="section-3"> <div class="mediabox"> <img src="img/02.png" alt="img02" /> <h3>Noodle Curry</h3> <p>Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea.Sushi gumbo beet greens corn soko endive gumbo gourd.</p> </div> <div class="mediabox"> <img src="img/06.png" alt="img06" /> <h3>Leek Wasabi</h3> <p>Sushi gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato.</p> </div> <div class="mediabox"> <img src="img/01.png" alt="img01" /> <h3>Green Tofu Wrap</h3> <p>Pea horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut wasabi tofu broccoli mixture soup.</p> </div> </section> <section id="section-4"> <div class="mediabox"> <img src="img/03.png" alt="img03" /> <h3>Tomato Cucumber Curd</h3> <p>Chickweed okra pea winter purslane coriander yarrow sweet pepper radish garlic brussels sprout groundnut summer purslane earthnut pea tomato spring onion azuki bean gourd. </p> </div> <div class="mediabox"> <img src="img/01.png" alt="img01" /> <h3>Mushroom Green</h3> <p>Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. Grape wattle seed kombu beetroot horseradish carrot squash brussels sprout chard.</p> </div> <div class="mediabox"> <img src="img/04.png" alt="img04" /> <h3>Swiss Celery Chard</h3> <p>Celery quandong swiss chard chicory earthnut pea potato. Salsify taro catsear garlic gram celery bitterleaf wattle seed collard greens nori. </p> </div> </section> <section id="section-5"> <div class="mediabox"> <img src="img/02.png" alt="img02" /> <h3>Radish Tomato</h3> <p>Catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut.</p> </div> <div class="mediabox"> <img src="img/06.png" alt="img06" /> <h3>Fennel Wasabi</h3> <p>Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra sea lettuce broccoli celery lotus root carrot winter purslane turnip greens garlic.</p> </div> <div class="mediabox"> <img src="img/01.png" alt="img01" /> <h3>Red Tofu Wrap</h3> <p>Green horseradish azuki bean lettuce avocado asparagus okra. Kohlrabi radish okra azuki bean corn fava bean mustard tigernut wasabi tofu broccoli mixture soup.</p> </div> </section> </div><!-- /content --> </div><!-- /tabs --> <script src="js/cbpFWTabs.js"></script> <script> new CBPFWTabs( document.getElementById( 'tabs' ) ); </script>
Css
.tabs { position: relative; width: 100%; overflow: hidden; margin: 1em 0 2em; font-weight: 300; }
/* Nav */
.tabs nav { text-align: center; }
.tabs nav ul { padding: 0; margin: 0; list-style: none; display: inline-block; }
.tabs nav ul li { border: 1px solid #becbd2; border-bottom: none; margin: 0 0.25em; display: block; float: left; position: relative; }
.tabs nav li.tab-current { border: 1px solid #47a3da; box-shadow: inset 0 2px #47a3da; border-bottom: none; z-index: 100; }
.tabs nav li.tab-current:before, .tabs nav li.tab-current:after { content: ''; position: absolute; height: 1px; right: 100%; bottom: 0; width: 1000px; background: #47a3da; }
.tabs nav li.tab-current:after { right: auto; left: 100%; width: 4000px; }
.tabs nav a { color: #becbd2; display: block; font-size: 1.45em; line-height: 2.5; padding: 0 1.25em; white-space: nowrap; }
.tabs nav a:hover { color: #768e9d; }
.tabs nav li.tab-current a { color: #47a3da; }
/* Icons */
.tabs nav a:before { display: inline-block; vertical-align: middle; text-transform: none; font-weight: normal; font-variant: normal; font-family: 'icomoon'; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; margin: -0.25em 0.4em 0 0; }
.icon-food:before { content: "e600"; }
.icon-lab:before { content: "e601"; }
.icon-cup:before { content: "e602"; }
.icon-truck:before { content: "e603"; }
.icon-shop:before { content: "e604"; }
/* Content */
.content section { font-size: 1.25em; padding: 3em 1em; display: none; max-width: 1230px; margin: 0 auto; }
.content section:before, .content section:after { content: ''; display: table; }
.content section:after { clear: both; }
/* Fallback example */
.no-js .content section { display: block; padding-bottom: 2em; border-bottom: 1px solid #47a3da; }
.content section.content-current { display: block; }
.mediabox { float: left; width: 33%; padding: 0 25px; }
.mediabox img { max-width: 100%; display: block; margin: 0 auto; }
.mediabox h3 { margin: 0.75em 0 0.5em; }
.mediabox p { padding: 0 0 1em 0; margin: 0; line-height: 1.3; }
/* Example media queries */
@media screen and (max-width: 52.375em) {
.tabs nav a span { display: none; }
.tabs nav a:before { margin-right: 0; }
.mediabox { float: none; width: auto; padding: 0 0 35px 0; font-size: 90%; }
.mediabox img { float: left; margin: 0 25px 10px 0; max-width: 40%; }
.mediabox h3 { margin-top: 0; }
.mediabox p { margin-left: 40%; margin-left: calc(40% + 25px); }
.mediabox:before, .mediabox:after { content: ''; display: table; }
.mediabox:after { clear: both; }
}
@media screen and (max-width: 32em) {
.tabs nav ul, .tabs nav ul li a { width: 100%; padding: 0; }
.tabs nav ul li { width: 20%; width: calc(20% + 1px); margin: 0 0 0 -1px; }
.tabs nav ul li:last-child { border-right: none; }
.mediabox { text-align: center; }
.mediabox img { float: none; margin: 0 auto; max-width: 100%; }
.mediabox h3 { margin: 1.25em 0 1em; }
.mediabox p { margin: 0; }
}
javascript
;( function( window ) {
'use strict';
function extend( a, b ) {
for( var key in b ) {
if( b.hasOwnProperty( key ) ) {
a[key] = b[key];
}
}
return a;
}
function CBPFWTabs( el, options ) {
this.el = el;
this.options = extend( {}, this.options );
extend( this.options, options );
this._init();
}
CBPFWTabs.prototype.options = {
start : 0
};
CBPFWTabs.prototype._init = function() {
// tabs elemes
this.tabs = [].slice.call( this.el.querySelectorAll( 'nav > ul > li' ) );
// content items
this.items = [].slice.call( this.el.querySelectorAll( '.content > section' ) );
// current index
this.current = -1;
// show current content item
this._show();
// init events
this._initEvents();
};
CBPFWTabs.prototype._initEvents = function() {
var self = this;
this.tabs.forEach( function( tab, idx ) {
tab.addEventListener( 'click', function( ev ) {
ev.preventDefault();
self._show( idx );
} );
} );
};
CBPFWTabs.prototype._show = function( idx ) {
if( this.current >= 0 ) {
this.tabs[ this.current ].className = '';
this.items[ this.current ].className = '';
}
// change current
this.current = idx != undefined ? idx : this.options.start >= 0 && this.options.start < this.items.length ? this.options.start : 0;
this.tabs[ this.current ].className = 'tab-current';
this.items[ this.current ].className = 'content-current';
};
// add to global namespace
window.CBPFWTabs = CBPFWTabs;
})( window );
本文链接：http://so.lmcjl.com/news/1288/