通过jQuery打开和关闭Div [英] Toggling the Div's on and off through jQuery

问题描述

Stackoverflowers！

在最后几个帖子，你都帮助我得到非常远，我现在面临另一个问题，如果你能够帮助我，我认为最后一次我没有解释得很好，所以这里就行了。

我有3个id div，命名为：white，v2black，v3black。我的目标是有一个超链接导航切换每个Div的开和关;然而，当点击一个时，它必须隐藏当前活动的div，所以两个不可见的同时。

请注意，来源和现场网站的链接是：www.steveatattooartist.com

已尝试足够，这是我目前的地方：

我的jQuery：

 code>< script> 
 jQuery（function（）{
 $（'。toggle'）。on（'click'，function（）{
 var id = $（this）.attr '）; 
 $（'＃'+ id）.toggle（）; 
}）; 
}）; 
< / script> 
  

我的Html结构：

 < div class =altstevenavstyle =display：none> 
< div class =stevenav> 
< ul class =navigation> 
< li>< a href =＃firstpagenameid =firstpagename><？php echo the_field（'first_page_name'）; ？>< / a>< / li> 
< li>< a href =＃secondpagenameid =secondpagename><？php echo the_field（'second_page_name'）; ？>< / a>< / li> 
< li>< a href =＃thirdpagenameid =thirdpagename><？php echo the_field（'third_page_name'）; ？>< / a>< / li> 
< / ul> 
< / div> 
< / div> 
 
< / div> <！ -  MAIN CLOSING DIV  - > 
< / div> <！ -  CONTENT CLOSING DIV  - > 
 
< div class =delstevenav> 
< div class =stevenav> 
< ul class =navigation> 
< li>< a href =＃firstpagenameid =firstpagename><？php echo the_field（'first_page_name'）; ？>< / a>< / li> 
< li>< a href =＃secondpagenameid =secondpagename><？php echo the_field（'second_page_name'）; ？>< / a>< / li> 
< li>< a href =＃thirdpagenameid =thirdpagename><？php echo the_field（'third_page_name'）; ？>< / a>< / li> 
< / ul> 
< / div> 
< / div> 
<！ - 所有的关闭在这里 - > 
 
<！ - 分区面板 - > 
< div id =white class =toggledata-for =white> 
< div style =width：968px; margin：0 auto;> 
< div class =panelstyle =color：＃000000;> 
< div style =width：450px; float：left;> 
< img src =<？php echo the_field（'image_one_of_biography'）; "width =425alt =Biography Image/> 
< br />< br /> 
< img src =<？php echo the_field （'image_two_of_biography'）; "width =425alt =Biography Image/> 
< br />< br /> 
< img src =<？php echo the_field （'image_three_of_biography'）; ？"width =425alt =Biography Image/> 
< / div> 
< div style =width：450px; float：left; text-align：left;> 
<？php echo the_field（'biography_content'）;？> 
< / div> 
< / div> 
 < / div> 
 
< div id =v2blackclass =toggledata-for =v2black> 
< div style =width：968px; height：500px; margin：0 auto;> 
 
< / div> 
< / div> 
 
< div id =v3blackclass = data-for =v3black> 
< div style =width：968px; height：500px; margin：0 auto;> 
 
< / div>< / div> 
 
< / div> 
  
 
 
 
真的希望有人能帮助我，因为你们已经认真地帮助我在这个项目中走得很远，我很感激它，A LOT！
解决方案
你的div需要有一个公共属性（例如类），所以你可以先隐藏它们，然后显示活动的div。 code> toggle 类是所有人都常用的，因此：
  .toggle'）。on（'click'，function（）{
 $（。toggle）。hide（）; 
 var id = $（this）.attr（'data-for' ）; 
 $（'＃'+ id）.show（）; 
}）; 
  
 
Stackoverflowers!

Over the last few post's you have all helped me get extremely far and I am now facing another problem if you are able to help me, I also think that the last times I have not explained very well, so here it goes.

I have 3 id divs, named: white, v2black, v3black. My aim is to have a hyperlink nav that toggles each one of the Div's on and Off; however, when one is clicked, it must hide the current active div so two are not visible at the same time. 

Just incase, the link for the source and the live site is: www.steveatattooartist.com

I have tried enough and this is where I am at the moment:

My jQuery:
<script>
 jQuery(function() {
  $('.toggle').on('click', function() {
    var id = $(this).attr('data-for');
    $('#' + id).toggle();
  });
});
</script>
My Html Structure:
<div class="altstevenav" style="display:none">
<div class="stevenav">
<ul class="navigation">
<li><a href="#firstpagename" id="firstpagename"><?php echo the_field('first_page_name'); ?></a></li>
<li><a href="#secondpagename" id="secondpagename"><?php echo the_field('second_page_name'); ?></a></li>
<li><a href="#thirdpagename" id="thirdpagename"><?php echo the_field('third_page_name'); ?></a></li>
</ul>
</div>
</div>

</div> <!--MAIN CLOSING DIV-->
</div> <!--CONTENT CLOSING DIV-->

<div class="delstevenav">
<div class="stevenav">
<ul class="navigation">
<li><a href="#firstpagename" id="firstpagename"><?php echo the_field('first_page_name'); ?></a></li>
<li><a href="#secondpagename" id="secondpagename"><?php echo the_field('second_page_name'); ?></a></li>
<li><a href="#thirdpagename" id="thirdpagename"><?php echo the_field('third_page_name'); ?></a></li>
</ul>
</div>
</div>
<!--ALL DIVS ARE CLOSE HERE-->

<!--Divisional Panels-->
<div id="white  class="toggle" data-for="white">
<div style="width:968px; margin: 0 auto;">
<div class="panel" style="color:#000000;">
<div style="width:450px; float:left;">
<img src="<?php echo the_field('image_one_of_biography'); ?>" width="425" alt="Biography Image" />
<br /><br />
<img src="<?php echo the_field('image_two_of_biography'); ?>" width="425" alt="Biography Image" />
<br /><br />
<img src="<?php echo the_field('image_three_of_biography'); ?>" width="425" alt="Biography Image" />
</div>
<div style="width:450px; float:left; text-align:left;">
<?php echo the_field('biography_content'); ?>
</div>
</div>
</div>

<div id="v2black" class="toggle" data-for="v2black">
<div style="width:968px; height:500px; margin: 0 auto;">

</div>
</div>

<div id="v3black"  class="toggle" data-for="v3black">
<div style="width:968px; height:500px; margin: 0 auto;">

</div></div>

</div>
Really hope someone could help me because you guys have seriously helped me get really far in this project and I appreciate it, A LOT!
解决方案
Your div's need to have a common attribute (e.g. class), so you can hide them all first, and then show the active div. The toggle class is common to all of them, so:
$('.toggle').on('click', function() {
    $(".toggle").hide();
    var id = $(this).attr('data-for');
    $('#' + id).show();
});


                        
这篇关于通过jQuery打开和关闭Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！