javascript - How to toggle active/inactive of tabs in Bootstrap using D3.js? -

how can toggle active/inactive of tabs in bootstrap using d3.js?

here's 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> 

i tried write following code:

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

in above code tried have recognize tap , make "active" state. however, when tried tap 1 of tab there, doesn't work @ all.

what's wrong code? wanted register on function ul.navbar-nav, , when 1 of tab tapped want active, , other tabs converted "inactive".

i removed comments , try give here although don't know d3.js ...

first of html snippet shows plain-text no html @ need guess dom ... selector correct? click handler called @ all?

assuming called, select , selectall selectors return desired elements?

if so, understanding of .style function sets css property , not class. instead .classed('active', true) or .classed('active', false) found when googled "d3 add css class".

while may set class still need remove active class other tabs make work.

if still not work may try using bootstrap .tab('show') method ... d3 interact jquery plugin functions work directly on d3 selectors? d3 selector return node can wrap $(d3.select(this)).tab('show') ?