Question

如果某个人创建了一个包含文字的段落，但他/她只是希望它出现，如果该人点击了该按钮。

我创建了我的按钮和段落，但即使没有单击按钮，该段落仍然会出现在浏览器上，那么如何在btn中“隐藏”段落直到它被点击？

#Belfastbutton {
  position: absolute;
  color: green;
  top: 310px;
  left: 130px;
  height: 40px;
  width: 120px;
  background-color: #e0e0d1;
  border-radius: 5px;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="Belfastbutton">Click for Details</button>
<p id=Belfastcontactdetails>34 Boucher Road, Belfast. <br>Co.Antrim<br>BT27</p>

Answer 1

最简单的方法是默认隐藏段落，然后在单击按钮时显示段落：

<button id="Belfastbutton" onclick="showDetails()">Click for Details</button>

#Belfastcontactdetails {
  display: none;
}

function showDetails() {
  document.getElementById("Belfastcontactdetails").style.display = 'block';
}

另请注意，您的段落需要在引号中包含ID才能正确验证并触发JavaScript：

<p id="Belfastcontactdetails">

我创造了这个here的工作小提琴。

希望这有帮助！：）

Answer 2

在CSS中将p设置为display:none。

使用.fadeIn()显示点击按钮。

＆＃13;

$('button').click(function() {
  
  $('p').fadeIn();
  
});

＆＃13;

#Belfastbutton {
  color: green;
  height: 40px;
  width: 120px;
  background-color: #e0e0d1;
  border-radius: 5px;
  padding: 5px;
}

#Belfastcontactdetails {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="Belfastbutton">Click</button>
 <p id=Belfastcontactdetails>text</p>
 </div>

＆＃13;

Answer 3

如果我理解你正在寻找这个。

＆＃13;

TypeError: Expected list for 'values' argument to 'Pack' Op, not <generator object <genexpr> at 0x12447e2d0>

＆＃13;

如果单击按钮，如何设置要显示的段落？

3 个答案: