[Dart] Tab Panel

<div>

  <!-- Nav tabs -->
  <ul class="nav-tabs">
    <li><a data-target="home">Home</a></li>
    <li><a data-target="profile">Profile</a></li>
    <li><a data-target="messages">Messages</a></li>
    <li><a data-target="settings">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="home">My home</div>
    <div class="tab-pane" id="profile">My profile</div>
    <div class="tab-pane" id="messages">My messages</div>
    <div class="tab-pane" id="settings">My settings</div>
  </div>

</div>

.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  list-style: none;
}
.nav-tabs > li {
  margin-bottom: 1px;
  margin-right: 1rem;
  line-height: 2rem;
}
.nav-tabs > li > a {
  cursor: pointer;
  text-decoration: none;
}
.tab-pane {
  padding: 1rem;
  display: none;
}
.tab-content > .active {
  display: block;
}

import 'dart:html';

void tabClick(Event e) {
  Element elm = e.target;
  var id = elm.dataset["target"];
  var pane = querySelector("#" + id);
  pane.classes.add("active");

  // remove .active class of all sibling elements
  var el = pane.nextElementSibling;
  while (el != null) {
    el.classes.remove("active");
    el = el.nextElementSibling;
  }
  el = pane.previousElementSibling;
  while (el != null) {
    el.classes.remove("active");
    el = el.previousElementSibling;
  }
}

void setupNavtab(Element navtab) {
  var tabs = navtab.querySelectorAll("*[data-target]");
  for (var tab in tabs) {
    tab.onClick.listen(tabClick);
  }
}

void main() {
  var navtabs = querySelectorAll(".nav-tabs");
  for (var navtab in navtabs) {
    setupNavtab(navtab);
  }
}