nav hover

by dke358

HTML

<div class="row heroRow">
  <div class="col-md-3">
    <ul class="nav-tabs">
      <li class="tab1"><a href="/" class="tab-link">Home</a></li>
      <li class="tab2 active"><a href="/" class="tab-link">Profile</a></li>
      <li class="tab3"><a href="/" class="tab-link">Message</a></li>
    </ul>
  </div>
  <div class="col-md-9">
    <div id="tab-content">
      <div class="tab0">CNX</div>
      <div class="tab1">Home</div>
      <div class="tab2">Profile</div>
      <div class="tab3">Message</div>
    </div>
  </div>
</div>

JavaScript

$(".nav-tabs li").hover(function() {
  console.log("111");
  $("#tab-content div." + this.className.match(/(tab\d+)/)[0]).show();
  $("#tab-content div.tab0").hide();
}, function() {
  console.log("222");
  $("#tab-content div." + this.className.match(/(tab\d+)/)[0]).hide();
  $("#tab-content div.tab0").show();
});