0

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

    } 
}
4

1 に答える 1

0

これを試して：

<select name="locations" onchange="gotoSection(this.value)">

function gotoSection(cururl) { 
    window.location.assign( 'http://libwww3.freelibrary.org/maps/central/' + cururl ); 
}

編集：答える前に質問全体を読む必要があるかもしれません。問題はナビゲーションが機能しなかったことだと思いました。申し訳ありません。

しかし、星についての質問については、あなたの質問とサンプルコードを正しく理解していれば、#hash タグが異なるだけで、同じページ内をナビゲートしていることになります。その場合、document.ready は実行されません。代わりに、星をトリガーする関数を作成し、新しい URL を割り当てた後に gotoSection メソッドから呼び出すことができます。

于 2013-07-19T23:37:25.130 に答える