0

我正在使用 HTML5、jQuery 和 Javascript 创建一个寻路应用程序。共有 3 个 html 页面，每个页面都有不同的图例。在这个应用程序中，我有一些按钮可以调用 jQuery click 函数来在地图上显示您选择的位置上方的星星。每个按钮都有一个 id，按钮按我希望的方式工作。问题是我想添加一个下拉列表，它将提供与图例上的按钮相同的功能。所以基本上我想要做的是从下拉列表中选择一个部分，然后跳转到具有该部分的页面，并且已经为所选部分显示了星星。IE：如果我选择洗手间，我希望能够跳到一楼并在洗手间上显示星星。这可能吗？我尝试使用 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 回答