2

私はこれまで 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;}

助けてくれてありがとう

4

3 に答える 3

0

jQuery ライブラリをインクルードし、この短い魔法のスクリプトを 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>
于 2012-12-02T05:01:33.030 に答える
0
  1. jQuery を使用します。それはあなたの人生をよりシンプルにします
  2. jqueryを含めたら
 $("#options").change(function(){
 $("#option div").hide();//hide all
 $("#option " + $("#options").val()).show();//hide all
 });
于 2012-12-02T04:53:51.980 に答える
0

最初に次のようなクラスを設定します。

<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

于 2012-12-02T04:58:45.517 に答える