使用JavaScript onClick将类更改为活动

Changing class to active using JavaScript onClick

本文关键字：活动 JavaScript onClick 使用      更新时间：2023-09-26

我已经尽力自己解决了这个问题，但没有成功，因为我是web开发的新手。这可能真的很基本，但我真的很感激你的帮助，因为我在这里兜圈子。。

我有一个谷歌地图搜索表单（本质上是一个商店定位器），我为搜索结果所做的工作分为两个选项卡；一个列表和一张地图。

我想做的是，当在搜索表单中按下提交按钮时，地图选项卡始终是活动选项卡。

这是HTML代码：

<ul class="nav nav-tabs" id="myTab">
  <li id="maptab" class="active"><a href="#resmap">Map</a></li>
  <li id="listtab" ><a href="#reslist">List</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="resmap">
    <div id="map_canvas"></div>
  </div>
  <div class="tab-pane" id="reslist">
    <div id="results">
      <ul class="res-list" id="list"></ul>
    </div>
  </div>
</div>

所以基本上，对于地图项目，我正在尝试将代码返回到

div class="tab-pane active"

和

li class="active"

大概我必须在提交按钮中添加一个onclick元素？？

表单中提交按钮的html是

<input type="submit" name="op" id="edit-submit" value="Search" class="btn btn-primary" />

在您的情况下，我认为您正试图将"active"类添加到li元素中：

var button = document.getElementById('edit-submit');
button.onclick= function() {
    // this adds the 'active' class to the classes that the element already has
    var maptab = document.getElementById('maptab');
    maptab.className = maptab.className + ' active';
};
相关文章：