php - 在另一个 div 中显示一个 div 的菜单链接

Question

我创建了一个带有链接 (#) 的菜单，其目的是通过 onclick 属性显示和隐藏一个 div。例如，链接“home”可以隐藏/显示 div“contentHome”，链接“contact”可以隐藏/显示 div“contentContact”。

我遇到的问题是，当我一次单击 2 个链接时，容器 div“content”包含 div“contentHome”和“contentContact”...

这是我的部分代码:

   <li><a href="#" onclick="toggle('contentHome');" ><?php echo $lang['MENU_ACCUEIL'];?>
<div id="content">
<div id="contentHome">  
    <img src="Images/photo.jpg" class="imgphoto" alt="Simplepic"  />
    <?php echo $lang['TEXTE_ACCUEIL'];?>
    <img src="Images/work.png" class="imgwork" height="100" width="100" alt="Travaux" /> 
   <?php echo $lang['TEXTE_SOON'];?>
</div>
<div id="contentContact">
    ...
   </div>
   </div> 

位置是静态的，我不能放置 z-index，当我放置 display:none; 时，div 不想加载。

你怎么看？我只是想用 div 创建一个动态菜单，但是包含的 php 让我很挣扎......

Answer 1

我在这里创建了一些使用 div 进行切换的示例。

 <li><a href="#" id="lnk_contentHome">Toggle Red</a></li>
 <li><a href="#" id="lnk_contentContact">Toggle Blue</a></li>


<div id="content">
<div class="toggled-item" id="contentHome">  
    <div style="width:200px; background-color:#f00; height:200px;"></div>

</div>
<div class="toggled-item" id="contentContact">  
                <div style="width:200px; background-color:#00f; height:200px;">&nbsp;</div>
</div>
</div>

<script>
$(document).ready(function(){
    $("#lnk_contentHome, #lnk_contentContact").click(function(){
        $(".toggled-item").hide();
        var target = $(this).attr("id").split("_")[1];
        $("#" + target).toggle();
    });
});
</script>

https://jsfiddle.net/ow7dd12f/5/

希望有所帮助。