Question

当我加载页面时，我应该只看到下拉菜单，而是看到我的新网站部分。什么可能导致它显示？

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>
                                </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;
}

Answer 1

如果您想使用样式，则不应该为#newwebsiteSection使用<section>标记。来自http://dev.w3.org/html5/spec/Overview.html#the-section-element：

section元素不是通用容器元素。当一个元素是出于样式目的或方便的需要脚本，鼓励作者使用div元素。一个一般规则是，section元素仅适用于元素的内容将在文档中明确列出概要

我认为您不应该只使用<div>标记。

Answer 2

您的问题可能是您的CSS无效......

#newwebsiteSection, #websiteredevelopmentSection, otherSection{
 blah blah 
}

您错过了#

上的otherSection

Answer 3

尝试在页面加载时隐藏元素。

    $(function() {
        $('#requiredOption').change(function() {
            var divToHide = "#" + $(this).val() + "Section";
                $(divToHide).show()
                .siblings('#newwebsiteSection, #websiteredevelopmentSection, #otherSection')
                .hide();
        });
        $('#requiredOption').trigger('change');

//隐藏所有 $（'＃newwebsiteSection，＃websiteredevelopmentSection，＃otherSection'）。hide（）;

});

页面加载时未隐藏的部分

3 个答案: