Php 在javascript中切换div_Php_Javascript_Jquery

Php 在javascript中切换div

php javascript jquery

Php 在javascript中切换div,php,javascript,jquery,Php,Javascript,Jquery,我想通过点击链接来切换div。但是，当我点击一个链接时，事情并不是很顺利，它显示了一个新的div，但没有隐藏上一个div JavaScript代码 <script type="text/javascript"> function toggle(id){ var el = document.getElementById(id); if(el != null && el.style["display"]== 'none'){

我想通过点击链接来切换div。但是，当我点击一个链接时，事情并不是很顺利，它显示了一个新的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>


函数切换（id）{
var el=document.getElementById（id）；
如果（el！=null&&el.style[“显示”]=“无”）{
el.样式[“显示”]=“块”；
}
}

我的divs代码

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


要切换显示，您不需要做那么多
$("#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
});

使用本机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");

假设始终只显示一个div，您可以检查它：
更改逻辑，声明一个全局变量以保存当前可见div的值。然后在单击链接时更新该变量，以保存当前可见div的id。因此，使用现有代码，可以执行以下操作：
使用核心javascript：


像这样使用jquery：

检查我的新答案。我刚刚创建了带有3个div的示例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>


asdsa
var visibleDiv；
已切换的函数（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；
}
第一组
第二组
第三组



谢谢。
@FaryalKhan，我不确定显示什么内容{some id}
。你有一个链接，我可以检查，完整的HTML，看到布局结构，我没有链接，但你可以认为它是一个单一的div@FaryalKhan，我用解释更新了答案，剩下的就看你了谢谢你的快速回复help@Starx我认为他不是在问隐藏/显示div的问题。在问题的最后一行，他说：“如何保持活动div的id？”使用当前代码，您没有隐藏先前切换的div元素！考虑使用像jQuery这样的JavaScript框架。它将极大地帮助您的工作，让您的生活更轻松。如果您不使用它，为什么选择了jquery标记？感谢您的快速响应。我真正想做的是，我有一个id为'main content'的活动div，其他div用id=content_{id}隐藏，其中id为number。。。每个隐藏div都有不同的链接我想用活动div替换隐藏div当我单击其各自的链接时，变量visibleDiv中应该有以前活动的div id。在第二个注释中，如果您的意思是，您希望用单击的链接的div替换当前可见的div，那么您可以使用visibleDiv变量隐藏上一个div。此外，如果它不起作用，请尝试使用firebug进行检查，然后让我知道错误是什么？？？当我第二次单击visDiv时，visDiv再次成为主要内容div。我编辑了问题，请查看一下，以便您更好地理解我要做的事情您说：“如果我点击第二个链接，它需要用点击的内容替换内容分区”。这里的“它”和“那个”是什么？你点击的是链接，对吗？那么，“内容分区”里面需要放什么“div？请告诉我如何用另一个id=content的div替换id=content\u 11的div，谢谢你的努力，但这不是我所需要的，或者对我不起作用：(
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;
$("[id^=content_]").each(function() {
if($(this).is(':visible')){
   visibleDiv = $(this).attr('id');
}

});

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