Section not hidden on page load [closed]
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
When I load my page I should only see the drop down menu but instead I am seeing my newwebsite Section. What could be causing it to show?
HTML:
JS:
$(function() {
$('#requiredOption').change(function() {
var divToHide = "#" + $(this).val() + "Section";
$(divToHide).show()
.siblings('#newwebsiteSection, #websiteredevelopmentSection, #otherSection')
.hide();
});
});
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Template 2011</title>
<link rel="stylesheet" href="_assets/css/style.css">
</head>
<body>
<header>
<div id="logo">Template Here</div>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="quote.html">Free Quote</a></li>
<li><a href="#">Showcase</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
</header>
<section id="content">
<h1>Free Quote</h1>
<p>Please fill out the below questionnaire to receive your free web development quote</p>
<form action="" method="post" accept-charset="utf-8">
<select name="requiredOption" id="requiredOption">
<option id="pleaseselect" value="pleaseselect">Please Select Your Required Quote</option>
<option id="newwebsite" value="newwebsite">New Website</option>
<option id="websiteredevelopment" value="websiteredevelopment">Website Redevelopment</option>
<option id="other" value="other">Other</option>
</select>
</form>
<section id="newwebsiteSection">
<form action="" id="newwebsiteForm" method="get" accept-charset="utf-8">
<fieldset>
<div><label>Do You Require Hosting?</label><input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input></div>
<div><label>Do You Require A Domain?</label><input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input></div>
<div><label>Do You Have A Logo?</label><input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input></div>
<div><label>What is your Domain?</label></div>
<div><input type="url" name="domain" value="http://example.com"></input></div>
<div><label>Type of site Required?<label></div>
<div>
<select name="newwebsiteType" id="newwebsiteType">
<option value="shoppingCart">Shopping Cart</option>
<option value="CMS">Content Management System</option>
<option value="static">Static Website</option>
<option value="otherDevelopment">Other Development</option>
</select>
开发者_StackOverflow社区 </div>
<div><label>Do You Require A Design?</label></div>
<div><input type="radio" name="Yes" value="Yes">Yes</input><input type="radio" name="No" value="No">No</input></div>
<div><label>Three Favorite colors?</label></div>
<div><input name="color1" value=""></input></div>
<div><input name="color2" value=""></input></div>
<div><input name="color3" value=""></input></div>
<div><label>What are your favorite websites?</label></div>
<div><input type="text" name="fav1" value=""></input></div>
<div><input type="text" name="fav2" value=""></input></div>
<div><input type="text" name="fav3" value=""></input></div>
<div><label>Comments?</label></div>
<div><textarea name="comments" id="comments"></textarea></div>
<div><input type="submit" name="submit" value="Send Quote Request"></div>
</form>
</section>
<section id="websiteredevelopmentSection">
<p>Website Redevelopment</p>
</section>
<section id="otherSection">
<p>Other</p>
</section>
</section>
<section id="sidebar">
<div id="box_one">
<p>Box One</p>
</div>
<div id="box_two">
<p>Box Two</p>
</div>
<div id="box_three">
<p>Box Three</p>
</div>
</section>
<footer>
<p>This is the footer</p>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="_assets/js/js.js" type="text/javascript"></script>
</body>
CSS:
/* Quote Page */˝
#newwebsiteSection, #websiteredevelopmentSection, #otherSection{
display:none;
}
#newwebsiteForm fieldset{
width:600px;
margin:0 auto;
}
#newwebsiteForm input {
display:inline;
border:1px solid #444;
border-top-color:#333;
background-color: #222; /* IE */
background-color: rgba(0, 0, 0, 0.3);
margin: 20px 0 0 0;
padding: 2px 9px 2px 9px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
width:250px;
height:28px;
color: #989898;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#newwebsiteForm input:hover {
border-color:#4C4C4C;
border-top-color:#343434;
}
#newwebsiteForm input:focus {
box-shadow: 0px 0px 3px #555;
border-color:#4C4C4C;
border-top-color:#343434;
}
#newwebsiteForm textarea {
display:inline;
border:1px solid #444;
border-top-color:#333;
background-color: #222; /* IE */
background-color: rgba(0, 0, 0, 0.3);
font-family: Verdana, Arial, Helvetica, sans-serif;
margin:20px 0;
padding: 4px 9px 4px 9px;
font-size: 11px;
width:250px;
height:132px;
color: #989898;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
resize:none;
}
#newwebsiteForm textarea:hover {
border-color:#4C4C4C;
border-top-color:#343434;
}
#newwebsiteForm textarea:focus {
box-shadow: 0px 0px 3px #555;
border-color:#4C4C4C;
border-top-color:#343434;
}
Try hiding the elements on page load.
$(function() {
$('#requiredOption').change(function() {
var divToHide = "#" + $(this).val() + "Section";
$(divToHide).show()
.siblings('#newwebsiteSection, #websiteredevelopmentSection, #otherSection')
.hide();
});
$('#requiredOption').trigger('change');
// hide ALL $('#newwebsiteSection, #websiteredevelopmentSection, #otherSection').hide();
});
You should probably not use a <section> tag for your #newwebsiteSection, if you want to use styles. From http://dev.w3.org/html5/spec/Overview.html#the-section-element:
The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
I don't see any reason why you should not just use a <div> tag instead.
Your issue may be that your CSS is invalid...
#newwebsiteSection, #websiteredevelopmentSection, otherSection{
blah blah
}
You're missing the # on otherSection
加载中,请稍侯......
精彩评论