HTML5、jQuery、Javascript を使用して道案内アプリを作成しています。合計 3 つの HTML ページがあり、各ページには異なる凡例があります。このアプリには、jQuery クリック関数を呼び出すボタンがあり、選択した場所の上に星を表示します。各ボタンには ID があり、ボタンは希望どおりに機能します。問題は、凡例のボタンと同じ機能を提供するドロップダウン リストを追加したいということです。したがって、基本的に私ができるようにしたいのは、ドロップダウンリストからセクションを選択し、そのセクションを含むページにジャンプして、選択したセクションに星が既に表示されていることです. IE: トイレを選択した場合、1 階をジャンプして、トイレの上に星を表示したいと考えています。これは可能ですか?Javascript 関数を使用して、必要な選択リスト オプションの値に URL を移動しようとしましたが、星が表示されませんでした。私はJavascriptとjQueryにかなり慣れていないので、助けてください。ありがとう!これが私のコードです:
HTML:
<form method="get" name="form1" action="">
<select name="locations" onchange="gotoSection(this.form)">
<option selected>Please pick a Section</option>
<option disabled>---Ground Floor---</option>
<option value="grdFloor.html#mc" >Mayor's Commision on Literacy</option>
<option value="grdFloor.html#ch">Children's</option>
<option value="grdFloor.html#sr">Story Book Room</option>
<option value="grdFloor.html#eo">Extensions Office</option>
<option value="grdFloor.html#ma">Montgomery Auditorium</option>
<option value="grdFloor.html#restRm">Restrooms</option>
</select>
</form>
<div id="restRm" class="legend">
<a href="#restRm" ><img src="floorMaps/restBTN.png"/></a>
</div>
jQuery:
$(document).ready(function(){
$('.legend, .arrows').show('slow');
$('.stars').hide();
$('#restRm').click(function(){
$('.stars:not(#restStar1, #restStar2)').fadeOut('slow');
$('#restStar1, #restStar2').toggle('pulsate');
}); //end restroom
Javascript:
function gotoSection(form) {
var newIndex = form.locations.selectedIndex;
if ( newIndex == 0 ) {
alert( "Please select a Section!" );
} else {
cururl = form.locations.options[ newIndex ].value;
window.location.assign( 'http://libwww3.freelibrary.org/maps/central/' + cururl );
}
}