Question

我有一个带有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 code：

<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属性更改为#value。

Answer 2

似乎你在显示和隐藏一些div时遇到了一些麻烦这里显示＆amp;隐藏示例：

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>

单击显示和隐藏div

2 个答案: