Next prev 在 div 之间导航
Posted
技术标签:
【中文标题】Next prev 在 div 之间导航【英文标题】:Next prev navigation between divs 【发布时间】:2016-06-22 17:03:57 【问题描述】:我尝试在共享相同类的 div 之间进行导航体验:(.art_details)。这个 div 嵌套在 li 元素中。
默认是隐藏的,当点击 li 项时会完全填满屏幕。
然后我需要在 .art_details div 之间创建导航,下一个和上一个。
这是模型,接下来应该在第 1、第 2、第 3 和第 4 之间导航,依此类推。
[http://i.stack.imgur.com/Md8mD.png][1]
我找到了一个非常有用的脚本,但我遇到的问题是导航在第一项之后停止,只导航下一项并停在那里。
设置比fiddle复杂一点,fiddle不工作但有Js代码。
<ul id="group">
<li class="artwork_grid_item">
<div class="item_front">
<img class="img1" 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" 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 类是在使用 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');
);
【问题讨论】:
你能提供你的旧css吗? 【参考方案1】:为什么不采用 Bootstrap Framework 来满足您的要求。
带有下一个和上一个按钮的选项卡部分。
<!-- 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>
查看演示链接。
Bootstrap Horizontal Scrolling Tabs
Mockup
【讨论】:
我会试试这个!我必须看看如何集成到 因为我需要一个下一个和上一个按钮。我不需要标签,也不需要滚动标题.. 我在我的项目之一中使用了这个概念。效果很好。 谢谢伙计。你如何让箭头显示标签而不是滚动导航本身? @pepep,等一下, 这是一个很好的解决方案,非常感谢你们的帮助。以上是关于Next prev 在 div 之间导航的主要内容,如果未能解决你的问题,请参考以下文章