<script src="http://tympanus.net/Development/TabStylesInspiration/js/modernizr.custom.js"></script>
<link href="http://tympanus.net/Development/TabStylesInspiration/css/tabs.css" rel="stylesheet"/>
<link href="http://tympanus.net/Development/TabStylesInspiration/css/tabstyles.css" rel="stylesheet"/>
<section>
<div class="tabs tabs-style-line">
<div class="content-wrap">
<a href="javascript(0);" class="prev">
<img src="http://demo.litextension.com/le_demo/skin/frontend/default/default/le_itemslider/images/icon-prev.png">
</a>
<a href="javascript(0);" class="next">
<img src="http://demo.litextension.com/le_demo/skin/frontend/default/default/le_itemslider/images/icon-next.png">
</a>
<section id="section-line-1"><p>1</p></section>
<section id="section-line-2"><p>2</p></section>
<section id="section-line-3"><p>3</p></section>
<section id="section-line-4"><p>4</p></section>
<section id="section-line-5"><p>5</p></section>
</div><!-- /content -->
<nav>
<ul>
<li><a href="#section-line-1"><span>Our Controls</span></a></li>
<li><a href="#section-line-2"><span>Sony Playstation 4</span></a></li>
<li><a href="#section-line-3"><span>Microsoft Xbox One</span></a></li>
<li><a href="#section-line-4"><span>Nintendo Wii U</span></a></li>
<li><a href="#section-line-5"><span>Microconsoles</span></a></li>
</ul>
</nav>
</div><!-- /tabs -->
</section>
<script src="http://tympanus.net/Development/TabStylesInspiration/js/cbpFWTabs.js"></script>
<script>
(function() {
[].slice.call(document.querySelectorAll('.tabs')).forEach(function(el) {
new CBPFWTabs(el);
});
})();
</script>
&#13;
标签内容工作正常,但如何在此添加下一个上一个选项 灵感。
答案 0 :(得分:0)
检查此解决方案:
http://jsfiddle.net/bpzat7r0/3/
注意为div(.tabs)和nav链接(.prev和.next)添加ID属性
<强> HTML:强>
<section>
<div class="tabs tabs-style-line" id="tab1">
<div class="content-wrap">
<a href="javascript:" class="prev" id="prev1">
<img src="http://demo.litextension.com/le_demo/skin/frontend/default/default/le_itemslider/images/icon-prev.png">
</a>
<a href="javascript:" class="next" id="next1">
<img src="http://demo.litextension.com/le_demo/skin/frontend/default/default/le_itemslider/images/icon-next.png">
</a>
<section id="section-line-1"><p>1</p></section>
<section id="section-line-2"><p>2</p></section>
<section id="section-line-3"><p>3</p></section>
<section id="section-line-4"><p>4</p></section>
<section id="section-line-5"><p>5</p></section>
</div><!-- /content -->
<nav>
<ul>
<li><a href="#section-line-1"><span>Our Controls</span></a></li>
<li><a href="#section-line-2"><span>Sony Playstation 4</span></a></li>
<li><a href="#section-line-3"><span>Microsoft Xbox One</span></a></li>
<li><a href="#section-line-4"><span>Nintendo Wii U</span></a></li>
<li><a href="#section-line-5"><span>Microconsoles</span></a></li>
</ul>
</nav>
</div><!-- /tabs -->
</section>
JAVASCRIPT编辑:
var $t=new CBPFWTabs(document.getElementById( 'tab1' ) )
document.getElementById('prev1').onclick=function(){
var current=$t.current;
var count=$t.items.length;
current--;
if(current<0) current=count-1;
$t._show(current);
};
document.getElementById('next1').onclick=function(){
var current=$t.current;
var count=$t.items.length;
current++;
if(current>=count) current=0;
$t._show(current);
};