标签内容与next和;以前的选择

Question

＆＃13;

＆＃13;

<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;

＆＃13;

＆＃13;

Tab Styles Inspiration

  

标签内容工作正常，但如何在此添加下一个上一个选项   灵感。

Answer 1

检查此解决方案：

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);
};