Javascript 点击开关类_Javascript_Jquery_Html_Css

Javascript 点击开关类

javascript jquery html css

Javascript 点击开关类,javascript,jquery,html,css,Javascript,Jquery,Html,Css,嗨，我有一个关于简单Javascript函数的问题。下面的代码很容易看到，当用户点击点击按钮时，我想切换类，我的意思是当页面加载时，需要显示“This is para”，然后当用户点击点击按钮时，文本需要更改为更新。但是我不知道为什么它不起作用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htm

嗨，我有一个关于简单Javascript函数的问题。下面的代码很容易看到，当用户点击点击按钮时，我想切换类，我的意思是当页面加载时，需要显示“This is para”，然后当用户点击点击按钮时，文本需要更改为更新。但是我不知道为什么它不起作用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title>untitled</title>
  <script type="text/javascript" src="jquery.js"></script>
  <style type="text/css">
   .none {
    display: none;
   }
 .display1 {
  display: block;
 }
  </style>
</head>
<body>
<p id="default">This is para</p>
<p id="updated" style="display:none">This is updated</p>
<p><input type="button" value="Click" id="button1" /></p>

<script type="text/javascript">
$(document).ready(function(){
 $("#button1").click(function(){
  $("#default").addClass("none"); 
  $("#updated").addClass("display1");
 });

});
</script>
</body>
</html>


无标题
.没有{
显示：无；
}
.display1{
显示：块；
}
这是第
此项已更新

$（文档）.ready（函数（）{
$（“#按钮1”）。单击（函数（）{
$（“#默认值”）.addClass（“无”）；
$（“更新”）.addClass（“显示1”）；
});
});

为什么不使用

show（）

和

hide（）

为什么不使用

show（）

和

hide（）

改为这样做：

$("#default").hide(); 
$("#updated").show();

您可以去掉

none

和

display1

类

发生在您身上的是

style=“display:none”

优先于类，因此它永远不会以这种方式显示。

请执行以下操作：

$("#default").hide(); 
$("#updated").show();

您可以去掉

none

和

display1

类

发生在您身上的事情是，

style=“display:none”

优先于类，因此它永远不会以这种方式显示。

您的“addClass”调用（可能）正在工作，但是直接在元素上的样式胜过CSS提供的样式

就我个人而言，我更喜欢通过改变“类”值来做这类事情，但是你不能真正地混合和匹配这两种方法。（当然，你可以，但它容易混淆和出错。）与其用那种样式开始你的元素，不如给它一个“none”类。

你的“addClass”调用（可能）是有效的，但是直接在元素上的样式胜过CSS提供的样式

就我个人而言，我更喜欢通过改变“类”值来做这类事情，但是你不能真正地混合和匹配这两种方法。（当然可以，但它很容易混淆和出错。）与其用那种样式启动元素，不如给它一个“none”类。

为什么不直接使用jQuery的show（）和hide（）函数呢？我可以，但我只想澄清我对jQuery.addclass的概念。@add class和remove class主要用于在运行时应用css属性，为了炫耀，你应该像其他人一样使用mentioned@gov就我个人而言，我不同意，主要是因为它更具侵入性。操纵元素类使外观决策不在代码中，也不在它们所属的CSS中。代码做出决策并更新DOM的逻辑状态。另外@Jay我可以建议您为您的问题想出一个更好的标题吗？“javascript问题”有点泛化，你不觉得吗？你为什么不直接使用jQuery的show（）和hide（）函数呢？我可以，但只是想澄清一下我对jQuery.addclass的概念。@add class和remove class主要用于在运行时应用css属性，用于显示和关闭你应该像其他人一样使用的属性mentioned@gov我个人不同意，主要是因为它更具侵入性。操纵元素类使外观决策不在代码中，也不在它们所属的CSS中。代码做出决策并更新DOM的逻辑状态。另外@Jay我可以建议您为您的问题想出一个更好的标题吗？“javascript问题”有点泛化，你不觉得吗？如果出于某种原因需要类，那么它就不起作用了，因为他没有摆脱第二个问题上的style=“display:none；”（你的代码将修复这个问题）。因此，我建议OP使用您的代码，或者如果他需要类，则更改

$（“更新”）.addClass（“display1”）到$（“#更新”）.show（）.addClass（“display1”）$（“更新”）.addClass（“display1”）到$（“#更新”）.show（）.addClass（“display1”）style=“display:hidden；”
添加到#updated元素中show（）
仍然可以工作，但我不希望在加载页面时第一次显示更新。您可以将style=“display:hidden；”添加到更新的元素中<代码>显示（）
$("#default").hide(); 
$("#updated").show();