我在获取一系列链接和对应div来隐藏和显示时遇到了一些麻烦。基本上是选项卡式导航。
$('#toShow>div>div>div:gt(0)').hide(); // hide all but first
$('#links .dslc-button').on('click', function(e) {
$('#toShow>div>div>div:eq(' + $(this).index() + ')').show(1700).siblings('div').stop(1).hide(1700);
return false;
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="dslc-main">
<div id="links" class="dslc-modules-section " style="">
<div class="dslc-modules-section-wrapper dslc-clearfix">
<div class="dslc-modules-area dslc-col dslc-2-col dslc-first-col" data-size="2">
<div id="dslc-module-355" class="dslc-module-front dslc-module-DSLC_Button dslc-in-viewport-check dslc-in-viewport-anim-none dslc-col dslc-12-col dslc-last-col dslc-module-handle-like-regular dslc-in-viewport" data-module-id="355" data-dslc-module-id="DSLC_Button"
data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="ease" data-dslc-preset="none" style="animation: forwards 0.65s ease none;">
<div class="dslc-button">
<a href="#" target="_self" onclick="" class="">
<span class="dslc-icon dslc-icon-link"></span>
<span class="dslca-editable-content" data-id="button_text" data-type="simple">CLICK TO EDIT</span>
</a>
</div>
<!-- .dslc-button -->
</div>
<!-- .dslc-module -->
</div>
<div class="dslc-modules-area dslc-col dslc-2-col " data-size="2">
<div id="dslc-module-356" class="dslc-module-front dslc-module-DSLC_Button dslc-in-viewport-check dslc-in-viewport-anim-none dslc-col dslc-12-col dslc-last-col dslc-module-handle-like-regular dslc-in-viewport" data-module-id="356" data-dslc-module-id="DSLC_Button"
data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="ease" data-dslc-preset="none" style="animation: forwards 0.65s ease none;">
<div class="dslc-button">
<a href="#" target="_self" onclick="" class="">
<span class="dslc-icon dslc-icon-link"></span>
<span class="dslca-editable-content" data-id="button_text" data-type="simple">CLICK TO EDIT</span>
</a>
</div>
<!-- .dslc-button -->
</div>
<!-- .dslc-module -->
</div>
<div class="dslc-modules-area dslc-col dslc-2-col " data-size="2">
<div id="dslc-module-357" class="dslc-module-front dslc-module-DSLC_Button dslc-in-viewport-check dslc-in-viewport-anim-none dslc-col dslc-12-col dslc-last-col dslc-module-handle-like-regular dslc-in-viewport" data-module-id="357" data-dslc-module-id="DSLC_Button"
data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="ease" data-dslc-preset="none" style="animation: forwards 0.65s ease none;">
<div class="dslc-button">
<a href="#" target="_self" onclick="" class="">
<span class="dslc-icon dslc-icon-link"></span>
<span class="dslca-editable-content" data-id="button_text" data-type="simple">CLICK TO EDIT</span>
</a>
</div>
<!-- .dslc-button -->
</div>
<!-- .dslc-module -->
</div>
<div class="dslc-modules-area dslc-col dslc-2-col " data-size="2">
<div id="dslc-module-358" class="dslc-module-front dslc-module-DSLC_Button dslc-in-viewport-check dslc-in-viewport-anim-none dslc-col dslc-12-col dslc-last-col dslc-module-handle-like-regular dslc-in-viewport" data-module-id="358" data-dslc-module-id="DSLC_Button"
data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="ease" data-dslc-preset="none" style="animation: forwards 0.65s ease none;">
<div class="dslc-button">
<a href="#" target="_self" onclick="" class="">
<span class="dslc-icon dslc-icon-link"></span>
<span class="dslca-editable-content" data-id="button_text" data-type="simple">CLICK TO EDIT</span>
</a>
</div>
<!-- .dslc-button -->
</div>
<!-- .dslc-module -->
</div>
<div class="dslc-modules-area dslc-col dslc-2-col " data-size="2">
<div id="dslc-module-359" class="dslc-module-front dslc-module-DSLC_Button dslc-in-viewport-check dslc-in-viewport-anim-none dslc-col dslc-12-col dslc-last-col dslc-module-handle-like-regular dslc-in-viewport" data-module-id="359" data-dslc-module-id="DSLC_Button"
data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="ease" data-dslc-preset="none" style="animation: forwards 0.65s ease none;">
<div class="dslc-button">
<a href="#" target="_self" onclick="" class="">
<span class="dslc-icon dslc-icon-link"></span>
<span class="dslca-editable-content" data-id="button_text" data-type="simple">CLICK TO EDIT</span>
</a>
</div>
<!-- .dslc-button -->
</div>
<!-- .dslc-module -->
</div>
<div class="dslc-modules-area dslc-col dslc-2-col dslc-last-col" data-size="2">
<div id="dslc-module-360" class="dslc-module-front dslc-module-DSLC_Button dslc-in-viewport-check dslc-in-viewport-anim-none dslc-col dslc-12-col dslc-last-col dslc-module-handle-like-regular dslc-in-viewport" data-module-id="360" data-dslc-module-id="DSLC_Button"
data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="ease" data-dslc-preset="none" style="animation: forwards 0.65s ease none;">
<div class="dslc-button">
<a href="#" target="_self" onclick="" class="">
<span class="dslc-icon dslc-icon-link"></span>
<span class="dslca-editable-content" data-id="button_text" data-type="simple">CLICK TO EDIT</span>
</a>
</div>
<!-- .dslc-button -->
</div>
<!-- .dslc-module -->
</div>
</div>
</div>
<div id="toShow" class="dslc-modules-section " style="">
<div class="dslc-modules-section-wrapper dslc-clearfix">
<div class="dslc-modules-area dslc-col dslc-12-col dslc-last-col" data-size="12">
<div id="dslc-module-362" class="dslc-module-front dslc-module-DSLC_Text_Simple dslc-in-viewport-check dslc-in-viewport-anim-none dslc-col dslc-12-col dslc-last-col dslc-module-handle-like-regular dslc-in-viewport" data-module-id="362" data-dslc-module-id="DSLC_Text_Simple"
data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="ease" data-dslc-preset="none" style="animation: forwards 0.65s ease none;">
<div class="dslc-text-module-content">
<h1>ONE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<!-- .dslc-module -->
</div>
<div class="dslc-modules-area dslc-col dslc-12-col dslc-last-col" data-size="12">
<div id="dslc-module-363" class="dslc-module-front dslc-module-DSLC_Text_Simple dslc-in-viewport-check dslc-in-viewport-anim-none dslc-col dslc-12-col dslc-last-col dslc-module-handle-like-regular dslc-in-viewport" data-module-id="363" data-dslc-module-id="DSLC_Text_Simple"
data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="ease" data-dslc-preset="none" style="animation: forwards 0.65s ease none;">
<div class="dslc-text-module-content">
<h1>TWO</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<!-- .dslc-module -->
</div>
<div class="dslc-modules-area dslc-col dslc-12-col dslc-last-col" data-size="12">
<div id="dslc-module-369" class="dslc-module-front dslc-module-DSLC_Text_Simple dslc-in-viewport-check dslc-in-viewport-anim-none dslc-col dslc-12-col dslc-last-col dslc-module-handle-like-regular dslc-in-viewport" data-module-id="369" data-dslc-module-id="DSLC_Text_Simple"
data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="ease" data-dslc-preset="none" style="animation: forwards 0.65s ease none;">
<div class="dslc-text-module-content">
<h1>3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<!-- .dslc-module -->
</div>
<div class="dslc-modules-area dslc-col dslc-12-col dslc-last-col" data-size="12">
<div id="dslc-module-370" class="dslc-module-front dslc-module-DSLC_Text_Simple dslc-in-viewport-check dslc-in-viewport-anim-none dslc-col dslc-12-col dslc-last-col dslc-module-handle-like-regular " data-module-id="370" data-dslc-module-id="DSLC_Text_Simple"
data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="ease" data-dslc-preset="none">
<div class="dslc-text-module-content">
<h1>4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<!-- .dslc-module -->
</div>
<div class="dslc-modules-area dslc-col dslc-12-col dslc-last-col" data-size="12">
<div id="dslc-module-371" class="dslc-module-front dslc-module-DSLC_Text_Simple dslc-in-viewport-check dslc-in-viewport-anim-none dslc-col dslc-12-col dslc-last-col dslc-module-handle-like-regular " data-module-id="371" data-dslc-module-id="DSLC_Text_Simple"
data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="ease" data-dslc-preset="none">
<div class="dslc-text-module-content">
<h1>5</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<!-- .dslc-module -->
</div>
<div class="dslc-modules-area dslc-col dslc-12-col dslc-last-col" data-size="12">
<div id="dslc-module-372" class="dslc-module-front dslc-module-DSLC_Text_Simple dslc-in-viewport-check dslc-in-viewport-anim-none dslc-col dslc-12-col dslc-last-col dslc-module-handle-like-regular " data-module-id="372" data-dslc-module-id="DSLC_Text_Simple"
data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650" data-dslc-anim-easing="ease" data-dslc-preset="none">
<div class="dslc-text-module-content">
<h1>SIX</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<!-- .dslc-module -->
</div>
</div>
</div>
</div>
我试图让相应的div隐藏和显示但不确定我做错了什么。我可以将初始内容div隐藏起来，一个选择不同的按钮，相应的div完成隐藏和显示。是否主要是因为我试图访问嵌套的div？
这是codepen： http://codepen.io/_Dawood/pen/eJqvbB
答案 0 :(得分：0)
我认为这很有效，任何意见都值得赞赏
$( "#links .dslc-modules-area" ).click(function() {
var identify=$(this).index();
console.log(identify);
$("#toShow>div>div>div").hide(600);
$("#toShow>div>div>div").eq([identify]).toggle(600);
});