Question

如何使用D3.js在Bootstrap中切换选项卡的活动/非活动状态？

这是我的HTML：

<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li class="active"><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</div>

我尝试编写以下代码：

    d3.select("ul.navbar-nav").on("click", function() {
        d3.select(this).selectAll("li").style("class", "active");
    })

在上面的代码中，我试图让它识别出水龙头并使其“活跃”＃34;州。但是，当我尝试点击其中一个标签时，它根本不起作用。

这段代码有什么问题？我只想将on函数注册到ul.navbar-nav，当点击其中一个标签时，我希望它处于活动状态，然后其他标签转换为＆＃34;非活动＆＃34;

Answer 1

我删除了我的评论并试着在这里提供一些帮助，虽然我对d3.js一无所知......

首先，因为您的HTML代码段只显示纯文本但根本没有HTML我需要猜测您的DOM ...选择器是否正确？是否完全调用了click处理程序？

假设它被调用，select和selectAll选择器是否会返回所需的元素？

如果是这样，我对.style函数的理解是它实际上设置了一个CSS属性而不是一个类。相反.classed('active', true)或.classed('active', false)是我在Google上搜索时发现的，并且#3; d3添加css类＆＃34;。

虽然这可以正确设置类，但您仍需要从其他选项卡中删除活动类以使其正常工作。

如果这仍然不起作用，您可以尝试使用bootstrap .tab('show')方法... d3是否与jQuery交互以便插件函数直接在d3选择器上工作？ d3选择器是否返回节点，以便您可以像$(d3.select(this)).tab('show')一样包装它？

Answer 2

我用这段代码完成了同样的事情。不知道这是否是优雅的方式，但它的工作原理。我们使用d3和bootstrap对此进行了测试和测试。

var navList = d3.select("ul.navbar-nav");
navList.selectAll("li").on("click", function (d, i) {
    navList.selectAll("li").classed("active", function (e, j) { return j == i; });
});

如何使用D3.js切换Bootstrap中选项卡的活动/非活动状态？

2 个答案: