Question

首先，有许多类似于我的问题，但我还没有找到一个我能够使用的答案。我有一个页面，当您输入时显示登录表单。我还有一个我想隐藏的注册表。点击一下，我想用注册表单替换登录表单。

我已经尝试过这个代码，我找到了这个代码可以使用，它有一个很好的平滑过渡，但它从一开始就显示了这两个元素。

$(function() {
  $('a').click(function() {
    div = $(this).attr('href'); //grab #one, #two which correspond to the div id we're targeting
    paragraph = $(div); //store each div in a variable for later use        
    $('#two').hide();
    $('div').hide('grey-bg'); //remove any greyed backgrounds
    $(paragraph).show('grey-bg'); //add grey background to clicked element
  });
});

a {
  text-decoration: none;
}

#one {
  margin: 10px;
  padding: 20px;
  border: 1px solid #000;
}

#two {
  margin: 10px;
  padding: 20px;
  border: 1px solid #000;
}

.grey-bg {
  background-color: #cccccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#one">First Link</a><br />
<a href="#two">Second Link</a>

<div id="one">
  This is the first paragraph.
</div>

<div id="two">
  This is the second paragraph.
</div>

您可以在此处看到它：https://codepen.io/raazxplorer/pen/rVKzNp

我所做的就是将removeClass和toggleClass改为hide / show。

Answer 1

在display:none;

中添加#two

#two {
  margin: 10px;
  padding: 20px;
  border: 1px solid #000;
  display:none;
}

$(function() {
  $('a').click(function() {
    div = $(this).attr('href'); //grab #one, #two which correspond to the div id we're targeting
    paragraph = $(div); //store each div in a variable for later use        
    $('#two').hide();
    $('div').hide('grey-bg'); //remove any greyed backgrounds
    $(paragraph).show('grey-bg'); //add grey background to clicked element
  });
});

a {
  text-decoration: none;
}

#one {
  margin: 10px;
  padding: 20px;
  border: 1px solid #000;
}

#two {
  margin: 10px;
  padding: 20px;
  border: 1px solid #000;
  display:none;
}

.grey-bg {
  background-color: #cccccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#one">First Link</a><br />
<a href="#two">Second Link</a>

<div id="one">
  This is the first paragraph.
</div>

<div id="two">
  This is the second paragraph.
</div>

Answer 2

只需在页面加载中隐藏其中一个div。

您需要的是：

$(document).ready(function(){
    $("#two").hide();
});

用jQuery显示/隐藏div？

2 个答案: