Question

我创建了一个带链接（＃）的菜单，旨在展示＆amp;由于onclick属性，隐藏div。例如，链接＆＃34; home＆＃34;可以隐藏/显示div＆＃34; contentHome＆＃34;，链接＆＃34;联系＆＃34;可以隐藏/显示div＆＃34; contentContact＆＃34;。

我遇到的问题是容器div＆＃34; content＆＃34;包括div＆＃34; contentHome＆＃34;和＆＃34; contentContact＆＃34;当我点击2个链接一次......

以下是我的代码的一部分：

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

希望有所帮助。

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

1 个答案: