Javascript 下拉选择不会更改div内容

当我从下拉菜单中选择不同的选项时，我试图使div中的内容发生变化。在此之前，我在div中有标签，但它们看起来很难看，所以我放弃了它们，改为使用下拉菜单。我将有一个下拉菜单参考地图或网格，用户可以通过稍后当我得到这个工作

工作代码：

HTML:

---

如果您能够编写Javascript，此解决方案将起作用：

// Get all list options
var listOptions = $('ul.dropdown-menu > li > a');

// Attach "click" event
listOptions.click(function(ev) {
  var href = $(this).attr('href');

  // Find divs with content
  var divToShow = $(href);
  var contentDivs = divToShow.parent().find('.content');

  contentDivs.removeClass('active');
  divToShow.addClass('active');
});

---

我稍微调整了一下代码。代码笔在此处可用：。请注意，我也对CSS做了小小的修改。

你是否考虑编写JS代码来实现这一点？这将相对容易：）使用javascript将使这变得容易得多。你可以搜索更改功能中的下拉列表，隐藏和显示div。我正在考虑使用js，但我对它不是很熟悉。谢谢你，它可以工作，但我在页面上的其他内容有问题。我在网页上有不止一个div，其中大约有3个有一个下拉列表，应该也是这样做的。现在他们每个人都是无内容的，而且当我从下拉列表中选择一个选项时，它会将屏幕拖到它上面。只显示带有“active”类的内容，因此您必须将“active”添加到div中，默认显示内容（请仔细查看添加的CSS类）。我建议添加更多的描述性类/ID来区分每个组。还有一件事——为了让这个例子起作用，contentdiv的每个id都应该是不同的。至于下拉菜单-UL和按钮应该在一个“div”标签中关闭，例如（这里是您的按钮和下拉列表），我在标签中发现了一些旧代码，这些代码会弄乱它，因此它们现在默认显示。当我从下拉列表中选择时，它仍然会清除所有其他div。我确实在它自己的div中有下拉列表，但它似乎按下了它旁边、下面的所有其他按钮。我用所有页面代码更新了代码笔，这样你就可以看到我在说什么了。这是已调整的代码笔：。对于按钮，您可以向其添加“float:left”参数。请仔细看看变化：）非常感谢Szyb，你给了我比我要求的更多。我把你的答案标对了！我在获得治疗、效率和总结方面仍然存在问题（因为它们只是空白），但我希望自己能解决这个问题。谢谢：）

    .btn-green {
    background-color:#33CC33;
    color: #FFFFFF;
}

.btn-blue {
    background-color:#3333FF;
    color: #FFFFFF;
}

.btn-purple {
    background-color:#CC00FF;
    color: #FFFFFF;
}

.nav-dropdown-style {
    font-weight: 600;
    padding: 4px 12px;
    margin: 14px 5px 5px 20px;
    font-size: 14px;
    float: right;
    background: #1ab394;
}

.nav-dropdown-style:hover {
  background: #199d82;
}

// Get all list options
var listOptions = $('ul.dropdown-menu > li > a');

// Attach "click" event
listOptions.click(function(ev) {
  var href = $(this).attr('href');

  // Find divs with content
  var divToShow = $(href);
  var contentDivs = divToShow.parent().find('.content');

  contentDivs.removeClass('active');
  divToShow.addClass('active');
});