javascript - 选择其他选项卡时禁用默认选项卡

Question

我的代码有 5 个选项卡。最初默认选择第一个。我希望当选择其他人时，当时不应该选择第一个。现在，每当选择其他选项卡时，第一个选项卡也会突出显示，当我将鼠标悬停在它上面时，它甚至不会给我选择选项卡时出现的手形指针。有什么办法解决吗？

在图像中，当选择明天时，逾期也会突出显示。 (逾期是我的默认选项卡)，我不希望它突出显示

Javascript:

   <script>
        $(function () {              
                $(".first").tab('show');              
        });            

         $(function () {
          $(".first").click(function (e) {
              $(".section1").toggle();
                $(".section2").hide();
                $(".section3").hide();
                $(".section4").hide();
                $(".section5").hide();
                e.preventDefault();                    
            });
        });
        $(function () {
            $(".second").click(function (f) {
                $(".section2").toggle();
                $(".section1").hide();
                $(".section3").hide();
                $(".section4").hide();
                $(".section5").hide();                    
                f.preventDefault();
            });
        });

        $(function () {
            $(".third").click(function (g) {
                $(".section3").toggle();
                $(".section1").hide();
                $(".section2").hide();
                $(".section4").hide();
                $(".section5").hide();
                g.preventDefault();
            });
        });

        $(function () {
            $(".fourth").click(function (i) {
                $(".section4").toggle();
                $(".section1").hide();
                $(".section3").hide();
                $(".section2").hide();
                $(".section5").hide();
                i.preventDefault();
            });
        });

        $(function () {
            $(".fifth").click(function (h) {
                $(".section5").toggle();
                $(".section1").hide();
                $(".section3").hide();
                $(".section4").hide();
                $(".section2").hide();
                h.preventDefault();
            });
        });

HTML:

    <ul class="nav nav-tabs" >
       <li class="first"><a href="#">Over due</a></li>
       <li class="second"><a href="#">Due Today</a></li>
       <li class="third"><a href="#">Due Tomorrow</a></li>
       <li class="fourth"><a href="#">Due This Week</a></li>
       <li class="fifth"><a href="#">Due This Month</a></li>
                               </ul>

Answer 1

$('.nav a').click(function() {
  var $this = $(this);
  var index = $('.nav a').index($this);
  
  if (index > 0) {
    $('.content div').hide().eq(index).show();
  }
});

li {
  list-style:none;
  display:inline-block;
}

.content div {
  display:none;  
}

.content div:first-child {
  display:block;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs" >
   <li><a href="#">Over due</a></li>
   <li><a href="#">Due Today</a></li>
   <li><a href="#">Due Tomorrow</a></li>
   <li><a href="#">Due This Week</a></li>
   <li><a href="#">Due This Month</a></li>
</ul>

<div class="content">
  <div>Content 1</div>  
  <div>Content 2</div>
  <div>Content 3</div>
  <div>Content 4</div>
  <div>Content 5</div>
</div>