我正在创建一个具有不同形式的网站页面，具体取决于用户输入，加载了不同的表单。
加载页面时，系统会询问用户是否要注册客户或卖家。取决于那个选择，我将变量设置为True或False加载相关表单，到目前为止我设法完成了这么多，但页面只加载了背景颜色，没有别的（这在我开始介绍JavaScript时就开始了）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<title>Customer/Reseller</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<!--[if IE]>
<style type="text/css">
.clear {
zoom: 1;
display: block;
}
</style>
<![endif]-->
</head>
<body>
<div class="section" id="page"> <!-- Defining the #page section with the section tag -->
<div class="header"> <!-- Defining the header section of the page with the appropriate tag -->
<h2>G51 Villain Supply</h2>
<h3>Delivering Technology </h3>
<div class="nav clear"> <!-- The nav link semantically marks your main site navigation -->
<ul>
<li><a href="index.html"> Home </a></li>
<li><a href="about.html"> About </a></li>
<li><a href="products.html"> Products </a></li>
<li><a href="app.html"> Customer/Reseller </a></li>
<li><a href="private.html"> Private </a></li>
</ul>
</div>
</div>
<div class="section" id="articles"> <!-- A new section with the articles -->
<!--start -->
<div class="line"></div> <!-- Dividing line -->
<div class="article" > <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<h2>Seller Section</h2>
<div class="line"></div>
<div class="articleBody clear">
<form action="" method="seller">
<fieldset>
<legend>Seller Registration Form</legend>
<br>Please complete </br>
<br><label for="Fname">First Name:</label></br> <input type="text" name="name" id="name"/>
<br><label for="Lname">Last Name:</label></br> <input type="text" name="name" id="name"/>
<br><label for="Contact">Contact Number:</label></br> <input type="text" name="name" id="name"/>
<br><label for="email">Email:</label></br> <input type="text" name="email" id="email" />
<p></p><p></p>
<p><label for="agree"> </label> <input type="checkbox" name="agree" id="agree" /> The information I have provided above is accurate.</p>
<p><label for="btnsubmit"> </label><input type="submit" value="Register" name="btnsubmit" id="btnsubmit" /></p>
<p></p>
</fieldset>
</form>
</div>
</div>
<!-- end -->
</div>
<div class="section" id="articles"> <!-- A new section with the articles -->
<!--start -->
<div class="line"></div> <!-- Dividing line -->
<div class="article" > <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<h2>Customers Section</h2>
<div class="line"></div>
<div class="articleBody clear">
<form action="" method="cust">
<fieldset>
<legend>Customer Registration Form</legend>
<br>Please complete </br>
<br><label for="Fname">First Name:</label></br> <input type="text" name="name" id="name"/>
<br><label for="Lname">Last Name:</label></br> <input type="text" name="name" id="name"/>
<br><label for="FAdd">First Line Address:</label></br> <input type="text" name="1stAdd" id="name"/>
<br><label for="PstAdd">Postcode:</label></br> <input type="text" name="PstAdd" id="name"/>
<br><label for="Contact">Contact Number:</label></br> <input type="text" name="name" id="name"/>
<br><label for="email">Email:</label></br> <input type="text" name="email" id="email" />
<p></p><p></p>
<p><label for="agree"> </label> <input type="checkbox" name="agree" id="agree" /> The information I have provided above is accurate.</p>
<p><label for="btnsubmit"> </label><input type="submit" value="Register" name="btnsubmit" id="btnsubmit" /></p>
<p></p>
</fieldset>
</form>
</div>
</div>
<!-- end -->
</div>
<div class="footer"> <!-- Marking the footer section -->
<div class="line"></div>
<p>Copyright 2012 - G51 Villain Supply </p> <!-- Change the copyright notice -->
<a href="#" class="up">Go UP</a>
</div>
</div> <!-- Closing the #page section -->
</body>
JavaScript的一些块未完成，因为我不知道如何。请帮忙，谢谢。
编辑：我用干净的工作代码替换了上面的代码。
答案 0 :(得分：2)
这是做错的方法。你不应该试图在脚本块中声明整个页面!!!而是使用以下伪代码：
<html>
<head>
<!-- Head content goes here -->
<script type="text/javascript">
</script>
</head>
<body>
<!-- body content -->
<div id="chooser" class="chooserclass">
<input type="checkbox" id="buyer" onclick="chooseBuyer()">Buyer</input>
<input type="checkbox" id="seller" onclick="chooseSeller()">Seller</input>
</div>
<div id="form1" class="form1css"> </div>
<div id="form2" class="form2css"> </div>
</body>
</html>
现在，在您的脚本中，您必须执行以下算法：
form1css和form2css最初应设置为“display：none”，如下所示：
document.getElementById("form1").style.display="none"
document.getElementById("form1").style.display="block" document.getElementById("seller").checked="false" 类似地使用逆逻辑实现chooseSeller（）函数。
答案 1 :(得分：1)
尝试这个，它正在工作（整理并修复）：
<!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">
<head>
<title>
Customer/Reseller
</title>
<link rel="stylesheet" type="text/css" href="styles.css" /><!--[if IE]>
<style type="text/css">
.clear {
zoom: 1;
display: block;
}
</style>
<![endif]-->
</head>
<body>
<div class="section" id="page">
<!-- Defining the #page section with the section tag -->
<div class="header">
<!-- Defining the header section of the page with the appropriate tag -->
<h2>
G51 Villain Supply
</h2>
<h3>
Delivering Technology
</h3>
<div class="nav clear">
<!-- The nav link semantically marks your main site navigation -->
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="products.html">Products</a>
</li>
<li>
<a href="app.html">Customer/Reseller</a>
</li>
<li>
<a href="private.html">Private</a>
</li>
</ul>
</div>
</div><input type="button" value="I'm a customer" onclick="document.getElementById('customerz').style.visibility='visible';document.getElementById('sellerz').style.display='none';" />
<input type="button" value="I'm a seller" onclick="document.getElementById('sellerz').style.visibility='visible';document.getElementById('customerz').style.visibility='none';">
<div id="sellerz" style='visibility:hidden;'>
<div class="section" id="articles">
<!-- A new section with the articles -->
<!--start -->
<div class="line"></div><!-- Dividing line -->
<div class="article">
<!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<h2>
Seller Section
</h2>
<div class="line"></div>
<div class="articleBody clear">
<form action="" method="seller">
<fieldset>
<legend>Seller Registration Form</legend><br />
Please complete<br />
<br />
<label for="Fname">First Name:</label><br />
<input type="text" name="name" id="name" /><br />
<label for="Lname">Last Name:</label><br />
<input type="text" name="name" id="name" /><br />
<label for="Contact">Contact Number:</label><br />
<input type="text" name="name" id="name" /><br />
<label for="email">Email:</label><br />
<input type="text" name="email" id="email" />
<p>
<label for="agree"> </label> <input type="checkbox" name="agree" id="agree" /> The information I have provided above is accurate.
</p>
<p>
<label for="btnsubmit"> </label><input type="submit" value="Register" name="btnsubmit" id="btnsubmit" />
</p>
</fieldset>
</form>
</div>
</div><!-- end -->
</div>
</div>
<div id="customerz" style='visibility:hidden;'>
<div class="section" id="articles">
<!-- A new section with the articles -->
<!--start -->
<div class="line"></div><!-- Dividing line -->
<div class="article">
<!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<h2>
Customers Section
</h2>
<div class="line"></div>
<div class="articleBody clear">
<form action="" method="cust">
<fieldset>
<legend>Customer Registration Form</legend><br />
Please complete<br />
<br />
<label for="Fname">First Name:</label><br />
<input type="text" name="name" id="name" /><br />
<label for="Lname">Last Name:</label><br />
<input type="text" name="name" id="name" /><br />
<label for="FAdd">First Line Address:</label><br />
<input type="text" name="1stAdd" id="name" /><br />
<label for="PstAdd">Postcode:</label><br />
<input type="text" name="PstAdd" id="name" /><br />
<label for="Contact">Contact Number:</label><br />
<input type="text" name="name" id="name" /><br />
<label for="email">Email:</label><br />
<input type="text" name="email" id="email" />
<p>
<label for="agree"> </label> <input type="checkbox" name="agree" id="agree" /> The information I have provided above is accurate.
</p>
<p>
<label for="btnsubmit"> </label><input type="submit" value="Register" name="btnsubmit" id="btnsubmit" />
</p>
</fieldset>
</form>
</div>
</div><!-- end -->
</div>
</div>
<div class="footer">
<!-- Marking the footer section -->
<div class="line"></div>
<p>
Copyright 2012 - G51 Villain Supply
</p><!-- Change the copyright notice -->
<a href="#" class="up">Go UP</a>
</div>
</div><!-- Closing the #page section -->
</div>
</body>
</html>
JavaScript正在做的伎俩：
<input type="button" value="I'm a customer" onclick="document.getElementById('customerz').style.visibility='visible';document.getElementById('sellerz').style.display='none';" />
<input type="button" value="I'm a seller" onclick="document.getElementById('sellerz').style.visibility='visible';document.getElementById('customerz').style.visibility='none';">
还有什么......？
好吧，我只是将每个部分包含在单独的div中：customerz中的客户部分和sellerz中的卖方部分
玩得开心！ ; - ）