Question

我以前从未使用过Javascript，只有HTML和CSS。我试图仅在从我的下拉列表中选择时才显示我的信息。我不知道任何Javascript所以任何帮助都会被过度赞赏。到目前为止这是我的HTML：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Gone Fishin'</title>
<link href="finale.css" rel="stylesheet" type="text/css">
</head>

<div id="wrapper">
<div id="nav">

<ul>
<li><a href="Index.html">About Us</a></li>
<li><a href="Species.html">List by Species</a></li>
<li><a href="County.html">List by County</a></li>
<li><a href="apply.html">Reservations</a></li>
</ul>
</div>
<body>

<div id="content">

<p>ontent</p>

<fieldset>
<legend>Choose your Target</legend>
<select name="option" id="options">
<option value=""></option>
<option value="1">American Shad</option>
<option value="2">Black Crappie</option>
<option value="3">Bluegill</option>
<option value="4">Brook Trout</option>
<option value="5">Brown Trout</option>
<option value="6">Carp</option>
<option value="7">Chain Pickerel</option>
<option value="8">Channel Catfish</option>
<option value="9">Flathead Catfish</option>
<option value="10">Largemouth Bass</option>
<option value="11">Muskellunge</option>
<option value="12">Norhtern Pike</option>
<option value="13">Pumkpinseed</option>
<option value="14">Rainbow Trout</option>
<option value="15">Readbreast Sunfish</option>
<option value="16">Rock Bass</option>
<option value="17">Sauger</option>
<option value="18">Saugeye</option>
<option value="19">Smallmouth Bass</option>
<option value="20">Steelhead</option>
<option value="21">Striped Bass</option>
<option value="22">Walleye</option>
<option value="23">White Bass</option>
<option value="24">White Crappie</option>
<option value="25">White Perch</option>
<option value="26">Yellow Perch</option>
</select>
<div id="option">
<div id="1" style="display: block">Test 1</div>
<div id="2">Test 2</div>
<div id="3">Test 3</div>
<div id="4">Test 4</div>
<div id="5">Test 5</div>
</div>


</fieldset>
</div>
</body>
</div>


</html>

这是我的CSS：

@charset "utf-8";
/* CSS Document */

/*General Styles*/

* {font-family:Verdana, Geneva, sans-serif;}

#wrapper {width:85%;
        margin:auto;
        background-color:#00CC00;}

/*End of General Styles*/

/* nav div styles */

#nav {background-color:#FF0000;
    text-align:center;}

#nav ul li {display:inline-block;
        background-color: #67e667;
        border:5px dashed;
        width: 90px
        text-align:center;}

#nav ul li a:link {background-color:#a60000;
                width: 90px;}

#nav ul li a:visited {background-color: #009999;}

#nav ul li a:hover {background-color: #a64b00;}

/* end nav styles */

/* content div styles*/

#content    {padding: 5px;}

#option     {display:none;} 

/*end content styles*/

/*start form styles*/
fieldset    {background-color:#ff7400;
            color:white}

label   {display:inline-block;
    width: 150px;
    float:left;
    margin-right: 3px;}

#form li{margin-bottom:10px;}



#dtg    li{margin-bottom:5px;}

感谢您收到任何帮助

Answer 1

使用jQuery。它会让你的生活更简单
包含jquery后

 $("#options").change(function(){
 $("#option div").hide();//hide all
 $("#option " + $("#options").val()).show();//hide all
 });

Answer 2

首先设置这样的类：

<div id="option">
<div class="tab tab-open" id="option1">Test 1</div>
<div class="tab" id="option2">Test 2</div>
<div class="tab" id="option3">Test 3</div>
<div class="tab" id="option4">Test 4</div>
<div class="tab" id="option5">Test 5</div>
</div>

然后添加此脚本

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$('#options').change(function(e) {
    $('#option .tab-open').removeClass('tab-open');
    $('#option'+$(this).val()).addClass('tab-open');
});
</script>

和风格

<style>
.tab {display: none;}
.tab-open {display: block;}
</style>

id也不应该以html中的数字开头，所以我改了它。

PS java≠javascript

Answer 3

包含任何jQuery lib并添加此简短的＆amp; html HEAD的神奇剧本：

<script src="http://path/to/jquery-1.7.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
    $('#options').change(function(){
        var sel = $(this).val();
        $('#'+sel).parent().children().hide();
        $('#'+sel).parent().show();
        $('#'+sel).show();
    });
});
</script>

根据Dropdown切换DIV的可见性

3 个答案: