gpt4 book ai didi

jquery - 单击时显示和隐藏 div

转载 作者:太空宇宙 更新时间:2023-11-04 11:47:56 25 4
gpt4 key购买 nike

我有一个带有 3 个菜单点的导航栏。称为“家”、“bildformate”和“kontakt”。加载时,类为“home”的 div 显示在导航栏下方,显示文本等。其他 2 个 div 被隐藏。当我点击“bildformate”时,我希望 home div 消失,并且类“formate”的 div 应该可见。 div“kontakt”也是如此。但是让我们首先关注“bildformate”div。这是我现在的代码:

<script>
$(document).ready(function(){
$('.bildformate').click(function() {
// show and hide
$('.home').hide();
$('.formate').show();
});
});

因此,当我单击“bildformate”时,它的工作时间就像一瞬间。您可以看到“home”div 变得不可见,而“formate”div 第二个闪烁。然后一切都像以前一样。为什么?

3 个 div 的 CSS:

.home {
margin: 0 auto;
margin-top: 30px;
width: 60%;
padding: 0px;
background-color:#ededed;
color: #787878;
border-radius: 5px;
}

.formate {
margin: 0 auto;
margin-top: 30px;
width: 60%;
padding: 0px;
background-color:#ededed;
color: #787878;
border-radius: 5px;
}

.kontakt {
margin: 0 auto;
margin-top: 30px;
width: 60%;
padding: 0px;
background-color:#ededed;
color: #787878;
border-radius: 5px;
}

.content {
margin: 40px;
padding: 20px;
}

HTML代码:

<body> 
<nav class="nav-wrapper">
<ul>
<li><a href="bildformate.html">Home</a></li>
<li class="bildformate"><a href="">Bildformate</a></li>
<li><a href="">Kontakt</a></li>
</ul>
</nav>

<div class="home">
<div class="content">
<p>Willkommen</p>
</div>
</div>

<div class="formate">
<div class="content">
<p>Bildformate</p>
</div>
</div>

<div class="kontakt">
<div class="content">
<p>Kontakt</p>
</div>
</div>

最佳答案

确定找到您的链接的问题,<a..标签有自己的 href属性设置为 ''这会导致页面为您重新加载。

如果将它们更改为 <a href="#" ...相反,它不会重新加载。您所说的重置/闪烁是页面重新加载的结果,从而使所有内容恢复到原始状态。

为了测试我只写了这一行

$("a").attr("href", "#");

但是您应该手动将所有 href 属性更改为 # 值。

关于jquery - 单击时显示和隐藏 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30829543/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com