将一个javascript切换按钮关闭另一个(Make one javascript toggle button turn off another)

将一个javascript切换按钮关闭另一个(Make one javascript toggle button turn off another)

我有一些javascript切换按钮; 切换一些内容; 他们彼此相邻，独立工作; 唯一的问题是我想要它，以便当你切换一个“div”时; 另一个会消失，反之亦然。 现在，如果你切换一个，然后切换另一个，他们都同时显示。 我试图自己更改这个代码并且无法弄清楚，所以我想知道是否有人知道如何适应这一点。 页面在这里：（ http://gtdsites.com/1-toggle-buttons/ ）。

这是我的代码：

<script type="text/javascript"> function toggleMe(btn,a){ var e1=document.getElementById(a); if(!e1)return true; if(e1.style.display=="none"){ e1.style.display="block"; btn.value = "MENU"; } else{ e1.style.display="none"; btn.value = "MENU"; } return true; } </script> <script type="text/javascript"> function toggleMe1(btn,a2){ var e2=document.getElementById(a2); if(!e2)return true; if(e2.style.display=="none"){ e2.style.display="block"; btn.value = "CART"; } else{ e2.style.display="none"; btn.value = "CART"; } return true; } </script> <div id="mobile_buttons_cont"> <input class="mobile_buttons" type="button" onclick="return toggleMe(this,'gman123')" value="MENU" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="mobile_buttons" type="button" onclick="return toggleMe1(this,'gman124')" value="CART"> </div> <div id="gman123" style="display: none"> <br/> <ul class="gsites_header2"> <li class="gsites_header2"> <a href="/contact/">CONTACT</a> </li> <li class="gsites_header2"> <a href="/services/">SERVICES</a> </li> <li class="gsites_header2"> <a href="/index/">INDEX</a> </li> </ul> </div> <div id="gman124" style="display: none"> <br/> <?php echo do_shortcode('[do_widget id=cart66cartwidget-2]'); ?> </div>

I have some javascript toggle buttons; that toggle some content; and they are next to each other and work independently; the only problem is that I want it so that when you toggle one "div" on; the other one will disappear and vice versa. Right now if you toggle one and then toggle the other they both show at the same time. I have tried to change this code myself and cannot figure it out, so I was wondering if anyone knows how to adapt this. the page is here: (http://gtdsites.com/1a-toggle-buttons/).

Here is my code:

<script type="text/javascript"> function toggleMe(btn,a){ var e1=document.getElementById(a); if(!e1)return true; if(e1.style.display=="none"){ e1.style.display="block"; btn.value = "MENU"; } else{ e1.style.display="none"; btn.value = "MENU"; } return true; } </script> <script type="text/javascript"> function toggleMe1(btn,a2){ var e2=document.getElementById(a2); if(!e2)return true; if(e2.style.display=="none"){ e2.style.display="block"; btn.value = "CART"; } else{ e2.style.display="none"; btn.value = "CART"; } return true; } </script> <div id="mobile_buttons_cont"> <input class="mobile_buttons" type="button" onclick="return toggleMe(this,'gman123')" value="MENU" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="mobile_buttons" type="button" onclick="return toggleMe1(this,'gman124')" value="CART"> </div> <div id="gman123" style="display: none"> <br/> <ul class="gsites_header2"> <li class="gsites_header2"> <a href="/contact/">CONTACT</a> </li> <li class="gsites_header2"> <a href="/services/">SERVICES</a> </li> <li class="gsites_header2"> <a href="/index/">INDEX</a> </li> </ul> </div> <div id="gman124" style="display: none"> <br/> <?php echo do_shortcode('[do_widget id=cart66cartwidget-2]'); ?> </div>

最满意答案

您的功能几乎相同，您可以通过将按钮值作为参数来组合它们。 要切换其他DIV，请将其ID作为另一个参数传递。

<script> function toggleMe(btn,btnval,thisdiv,otherdiv){ var e1=document.getElementById(thisdiv); var e2=document.getElementById(otherdiv); if(!e1 || !e2) { return true; } if(e1.style.display=="none"){ e1.style.display="block"; e2.style.display="none"; } else { e1.style.display="none"; e2.style.display="block"; } btn.value = btnval; return true; } </script> <div id="mobile_buttons_cont"> <input class="mobile_buttons" type="button" onclick="return toggleMe(this, 'MENU', 'gman123', 'gman124')" value="MENU" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="mobile_buttons" type="button" onclick="return toggleMe1(this, 'CART', 'gman124', 'gman123')" value="CART"> </div>

Your functions are nearly identical, you can combine them by making the button value a parameter. And to toggle the other DIV, pass its ID as another parameter.

<script> function toggleMe(btn,btnval,thisdiv,otherdiv){ var e1=document.getElementById(thisdiv); var e2=document.getElementById(otherdiv); if(!e1 || !e2) { return true; } if(e1.style.display=="none"){ e1.style.display="block"; e2.style.display="none"; } else { e1.style.display="none"; e2.style.display="block"; } btn.value = btnval; return true; } </script> <div id="mobile_buttons_cont"> <input class="mobile_buttons" type="button" onclick="return toggleMe(this, 'MENU', 'gman123', 'gman124')" value="MENU" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input class="mobile_buttons" type="button" onclick="return toggleMe1(this, 'CART', 'gman124', 'gman123')" value="CART"> </div>