在JavaScript中切换div

Question

I want to toggle divs by clicking on links. 我想通过单击链接来切换div。 but things are not going well for me when I click on a link it shows a new div but don hide the previous one 但是当我单击链接显示一个新的div但不隐藏前一个时，对我来说情况并不理想

JavaScript Code JavaScript代码

<script type="text/javascript">
    function toggle(id){ 
        var el = document.getElementById(id);
        if(el != null && el.style["display"]== 'none'){ 
            el.style["display"] = "block";
        }
    }
</script>

My divs code 我的div代码

<?php foreach($titles_data as $title){ ?>
 <div style="display:none" id="content_<?php echo $title['idtitles'] ?>">
   <div id="left-ad"></div>
 </div>
<?php } ?>

My links code 我的链接代码

<?php foreach($titles_data as $title){ ?>
<li class="flag_<?php echo strtoupper($title['language']) ?>">
 <a id="title_<?php echo $title['idtitles'] ?>" href="" title="<?php echo $title['title'] ?>" onclick="toggle('content_<?php echo $title['idtitles'] ?>')">
 </a>
</li>
<?php } ?>

How can it be done so that when i click on link its respective iv becomes visible and the previous one hides? 如何做，以便当我单击链接时其相应的iv变得可见而前一个隐藏？

Thanks 谢谢

Answer 1

Using native JS: 使用本地JS：

function toggle(id){
    var el = document.getElementById(id);         
    el.style.display = el.style.display == "none" ? "block" : "none";
}

toggle("myId");

Using jQuery: 使用jQuery：

function toggle(selector) {
    $(selector).toggle();
}

toggle("#myId");

Answer 2

To toggle the display, you dont need to do that much 要切换显示，您不需要做那么多

$("#elementid").toggle();

In reference to your question 关于你的问题

$('a').click(function() { // however this is select all anchors, better use class
                          // selector like $(".mylinkclass")
   var id= $(this).attr('id'); //get the id
   var ids = id.splite("_"); //split the id on "_", to extract the idtitles
   $("#content_"+ids[0]).toggle(); // use that to toggle
});

Answer 3

Assuming that there is always only one div that is displayed, you can check for it: Alter your logic, to declare a global variable to hold the value of the currently visible div. 假设始终只显示一个div，则可以检查一下：更改逻辑，以声明一个全局变量来保存当前可见的div的值。 And then update that variable whenever a link is clicked, to hold the id of the currently visible div. 然后，每当单击链接时更新该变量，以保存当前可见的div的ID。 So, using your exisitng code, you can do this : 因此，使用您的exisitng代码，您可以执行以下操作：

using core javascript : 使用核心javascript ：

 var visibleDiv; function toggle(id){ // hide the previous div using visibleDiv if(document.getElementById(visibleDiv)!= null) document.getElementById(visibleDiv).style["display"] = "none"; var el = document.getElementById(id); if ( el.style["display"] == "" || el.style["display"] == 'none' ){ el.style["display"] = 'block'; } visibleDiv = id; // update the current visible div name }

using jquery like this : 使用这样的jQuery ：

 var visibleDiv; $("[id^=content_]").each(function() { if($(this).is(':visible')){ visibleDiv = $(this).attr('id'); } });

Answer 4

Check my new answer. 检查我的新答案。 I just created the sample html page, with 3 divs. 我刚刚创建了3个div的示例html页面。 Initially all are shown. 最初全部显示。 When you click on one of them, it is hidden. 当您单击其中之一时，它是隐藏的。 When you click on some other div. 当您单击其他div时。 The old one is made visible again and the current one is hidden. 旧的将再次显示，而当前的将被隐藏。 Modify the logic as per your requirements. 根据您的要求修改逻辑。

 <html> <head> <title>asdsa</title> <script type="text/javascript"> var visibleDiv; function toggled(id){ //$('#div_2').html($('#div_1').html()); if(document.getElementById(visibleDiv) != null){ document.getElementById(visibleDiv).style["display"] = "block";} var el = document.getElementById(id); document.getElementById(id).style["display"] = "none"; visibleDiv = id; } </script> </head> <body> <div id="div_1" onclick="toggled('div_1')">div1</div> <div id="div_2" onclick="toggled('div_2')">div2</div> <div id="div_3" onclick="toggled('div_3')">div3</div> <hr/> </body> </html>

Thanks. 谢谢。

在JavaScript中切换div

问题描述

4 个解决方案

解决方案1
1 2012-03-19 12:07:07

解决方案2
0 2012-03-19 12:04:00

解决方案3
0 2012-03-19 12:27:52

解决方案4
0 2012-03-19 13:46:01

在JavaScript中切换div

问题描述

4 个解决方案

解决方案1 1 2012-03-19 12:07:07

解决方案2 0 2012-03-19 12:04:00

解决方案3 0 2012-03-19 12:27:52

解决方案4 0 2012-03-19 13:46:01

解决方案1
1 2012-03-19 12:07:07

解决方案2
0 2012-03-19 12:04:00

解决方案3
0 2012-03-19 12:27:52

解决方案4
0 2012-03-19 13:46:01