根據下拉菜單切換DIV的可見性

我從來沒有用過Javascript，只有HTML和CSS。我試圖讓我的信息只顯示從我的下拉列表中選擇。我不知道任何Javascript，所以任何幫助將過度讚賞。這是我的HTML至今：根據下拉菜單切換DIV的可見性

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

謝謝你的任何幫助，收到

來源

2012-12-02 user1869787

而問題是什麼？ –

問題是爲什麼在一些元素標籤後面的身體標籤方式 – SomeShinyObject

使用jQuery。它將使你的生活更簡單
一旦你已經包括jQuery的

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

來源

2012-12-02 04:53:51 Raghu

第一組類是這樣的：

<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>

也不應該以html中的數字開頭，所以我改變了它。

PS的Java≠JavaScript的

來源

2012-12-02 04:58:45

包括任何jQuery的lib和在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-02 05:01:33

根據下拉菜單切換DIV的可見性

回答

相關問題