Question

所以我正在制作一个页面，左边有三个导航标签，右边有一个地图。我在这里有导航标签的代码。在第一个标签上，我想要一个字段，用户可以在其中输入一些信息，地图将相应调整。一旦页面加载，它就可以正常工作，但是如果我访问另一个选项卡并返回，则输入字段将消失。有什么想法吗？

<div class="tabbable" class='span4'> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li id='tab1' class="active"><a href="#tab1" data-toggle="tab">Browse</a></li>
    <li><a href="#tab2" data-toggle="tab">History</a></li>
    <li><a href="#tab3" data-toggle="tab">Wishlist</a></li>
  </ul>
  <div class="tab-content">

    <!-- Browse tab -->
    <div class="tab-pane active" id="tab1">
      <form class="form-search">
        <input type="text" class="input-medium search-query" id='location'>
        <button type="submit" class="btn">Search</button>
        <p><b>Find brewery by name..</b></p>
      </form>
    </div><!-- end Browse Tab -->

    <!-- History tab -->
    <div class="tab-pane" id="tab2">
      <p>I've been here!</p>
    </div><!-- end History tab -->

    <!-- Wishlist tab -->
    <div class="tab-pane" id="tab3">
      <p>We still have to check these places out!</p>
    </div><!-- end Wishlist tab -->

  </div>
</div>

Answer 1

由于您的导航链接是使用a中的锚点的href标记，因此会在点击时重新加载该页面。页面重新加载将重置任何输入的表单信息。

Answer 2

有没有办法在没有刷新的地方做到这一点？我应该将a标签更改为其他标签吗？

是这样的（看起来很难看，效果很好的IMO）：

<a href="javascript:;"></a>

或者，使用HTML5，您可以完全忽略href

<a></a>

但是...我不建议这样做，可能是一些向后兼容性问题。

在重新阅读原始问题后，虽然我不认为这是问题的根源，但如果没有实例，很难说清楚。

我的导航标签正在删除元素

2 个答案: