Question

我想通过点击链接来切换div。但是当我点击一个显示新div的链接但不隐藏前一个

时，事情对我来说并不顺利

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>

我的div代码

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

我的链接代码

<?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 } ?>

如何做到这一点，当我点击链接时，它的相应iv会变得可见而前一个会隐藏？

由于

Answer 1

使用原生JS：

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

toggle("myId");

使用jQuery：

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

toggle("#myId");

Answer 2

要切换显示，您不需要那么多

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

参考你的问题

$('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

假设始终只显示一个div，您可以检查它：改变你的逻辑，声明一个全局变量来保存当前可见div的值。然后在每次单击链接时更新该变量，以保存当前可见div的id。因此，使用您的exisitng代码，您可以这样做：

使用核心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
}

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 }

使用jquery ，如下所示：

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

});

Answer 4

检查我的新答案。我刚创建了示例html页面，有3个div。最初都显示了所有内容。当您单击其中一个时，它将被隐藏。当你点击其他div时。旧的再次可见，当前的一个被隐藏。根据您的要求修改逻辑。



<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>

<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>

感谢。

在javascript中切换div

4 个答案: