单击时显示和隐藏 div

Question

我有一个带有 3 个菜单点的导航栏。称为“家”“bildformate”和“kontakt”。加载时，导航栏下方显示一个带有“home”类的 div，显示文本等。其他 2 个 div 被隐藏。当我单击“bildformate”时，我希望主 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>

Answer 1

好的，您的链接发现了问题，<a.. 标签将其href 属性设置为''，这会导致页面为您重新加载。

如果您将它们更改为 <a href="#" ...，则它不会重新加载。您所说的重置/闪存是页面重新加载的结果，从而使一切恢复到原始状态。

为了测试，我只写了这一行

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

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

Answer 2

您似乎在显示和隐藏某些 div 时遇到了一些问题。
这是显示和隐藏示例：

var toggle = false;
$('#press').click(function() { //Our button and on press
  if (toggle) { //check if its hidden
    $('.first').show();
    toggle = false;
  } else {
    $('.first').hide();
    toggle = true;
  }
});

.first {
  border: 2px solid red;
  background: pink;
}
.second {
  border: 2px solid blue;
  background: teal;
}
.third {
  border: 2px dotted green;
  background-color: lime;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="press">Show</button>
<div class="first">This is the first div</div>
<div class="second">Second div here</div>
<div class="third">etc</div>

如果你想要更少的代码，你可以简单地切换它：

$('#press').click(function() {
  //when pressed
  $('.first').toggle(); // show and hide
});

.first {
  background-color: pink;
  border: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="press">Toggle instead</button>
<div class="first">This is the first example</div>
<div class="second">Just a placeholder</div>