我创建了一个带有链接 (#) 的菜单,其目的是通过 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 让我很挣扎......
最佳答案
我在这里创建了一些使用 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;"> </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/
希望有所帮助。
关于php - 在另一个 div 中显示一个 div 的菜单链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29831145/