next prev 在 div 之间导航

Question

我尝试在共享相同 class 的 div 之间创建导航体验：(.art_details)。此 div 嵌套在 li 元素内.

它默认隐藏，当点击 li 项目时完全填满屏幕。

然后我需要在 .art_details div、下一个和上一个之间创建导航。

这是模型，接下来应该在第 1、2、3、4 等之间导航。

[http://i.stack.imgur.com/Md8mD.png][1]

我找到了一个非常有用的脚本，但我遇到的问题是导航在第一个项目之后停止，仅导航第一个下一个并停在那里。

设置比 fiddle 稍微复杂一点，它不起作用但有 Js 代码。

  <ul id="group">

  <li class="artwork_grid_item">          


  <div class="item_front"> 

  <img class="img1" width="200px" height="auto" src="http://dummyimage.com/600x400/000/fff">
  <h4>Title</h4>
  </div>  

  <div class="art_details" style="display:none;">
  <div class="closex">X</div>
  <h1> Artwork title </h1>
  <img class="img2" src="http://dummyimage.com/600x400/000/fff">
  <div id="next">next</div>
  <div style="display:none" id="prev">prev</div>
  </div>
  </li>

  <li class="artwork_grid_item">          
        <div class="item_front"> 
      <img class="img1" width="200px" height="auto" src="http://dummyimage.com/600x400/000/fff">
  <h4>Title</h4>
  </div>      
  <div class="art_details" style="display:none;">
  <div class="closex">X</div>
  <h1> Artwork title </h1>
  <img class="img2" src="http://dummyimage.com/600x400/000/fff">
  <div id="next">next</div>
  <div style="display:none" id="prev">prev</div>
  </div>
  </li>

  </ul>

  <div class="navigation_art">
  <div id="next">next</div>
  <div style="display:none" id="prev">prev</div>
 </div>

jS

// navigation 

function updateItems(delta)
{
    var $items = jQuery('.art_details');
    var $current = $items.filter('.expanded');
    var index = $current.index();
    var newIndex = index+delta;
    // Range check the new index
    newIndex = (newIndex < 0) ? 0 : ((newIndex > $items.length) ? $items.length : newIndex); 
    if (newIndex != index){
        $current.fadeOut('fast').removeClass('expanded');
        $current = $items.eq(newIndex).fadeIn('fast').addClass('expanded');
        // Hide/show the next/prev
        jQuery("#prev").toggle(!$current.is($items.first()));    
        jQuery("#next").toggle(!$current.is($items.last()));    
    }
}
jQuery("#next").click(function () {
    updateItems(1);
});
jQuery("#prev").click(function () {
    updateItems(-1);
});

.expanded class 是在用 jquery 单击项目时添加的：

// open artwork 

jQuery(function(jQuery) {
 jQuery('.item_front').click(function() {
   jQuery('body').addClass("noscroll");
   jQuery(this).parent().addClass("active");
   jQuery(".art_details").not(jQuery(this).next(".art_details")).fadeOut('fast');
   jQuery(this).next('.art_details').fadeIn('200, swing');
   jQuery(this).next('.art_details').addClass('expanded');
    });
}); 

// close all of them

jQuery('.closex').click(function() {
  jQuery('body').removeClass("noscroll");
 jQuery('.art_details').fadeOut('1900, swing');
 jQuery('.artwork_grid_item').removeClass("active");
 jQuery('.art_details').removeClass('expanded');

});

Answer 1

你为什么不采用 Bootstrap 框架 来满足你的要求。

带有下一个和上一个按钮的选项卡部分。

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#tab1" role="tab" data-toggle="tab">Tab Number 1</a></li>
  <li role="presentation"><a href="#tab2" role="tab" data-toggle="tab">Tab Number 2</a></li>
  <li role="presentation"><a href="#tab3" role="tab" data-toggle="tab">Tab Number 3</a></li>
  <li role="presentation"><a href="#tab4" role="tab" data-toggle="tab">Tab Number 4</a></li>
  <li role="presentation"><a href="#tab5" role="tab" data-toggle="tab">Tab Number 5</a></li>
  <li role="presentation"><a href="#tab6" role="tab" data-toggle="tab">Tab Number 6</a></li>
  <li role="presentation"><a href="#tab7" role="tab" data-toggle="tab">Tab Number 7</a></li>
  <li role="presentation"><a href="#tab8" role="tab" data-toggle="tab">Tab Number 8</a></li>
  <li role="presentation"><a href="#tab9" role="tab" data-toggle="tab">Tab Number 9</a></li>
  <li role="presentation"><a href="#tab10" role="tab" data-toggle="tab">Tab Number 10</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="tab1">Tab 1 content...</div>
  <div role="tabpanel" class="tab-pane" id="tab2">Tab 2 content...</div>
  <div role="tabpanel" class="tab-pane" id="tab3">Tab 3 content...</div>
  <div role="tabpanel" class="tab-pane" id="tab4">Tab 4 content...</div>
  <div role="tabpanel" class="tab-pane" id="tab5">Tab 5 content...</div>
  <div role="tabpanel" class="tab-pane" id="tab6">Tab 6 content...</div>
  <div role="tabpanel" class="tab-pane" id="tab7">Tab 7 content...</div>
  <div role="tabpanel" class="tab-pane" id="tab8">Tab 8 content...</div>
  <div role="tabpanel" class="tab-pane" id="tab9">Tab 9 content...</div>
  <div role="tabpanel" class="tab-pane" id="tab10">Tab 10 content...</div>
</div>

查看演示 link。

Bootstrap Horizontal Scrolling Tabs

Mockup

next prev 在 div 之间导航

Next prev navigation between divs

javascript

jquery

wordpress

next