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

＆＃13;

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

＆＃13;

li {
  list-style:none;
  display:inline-block;
}

.content div {
  display:none;  
}

.content div:first-child {
  display:block;  
}

＆＃13;

<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>

＆＃13;

Answer 2

你可以试试这个：

<ul class="nav nav-tabs">
    <li data-target="section1" class="tab first"><a href="#">Over due</a></li>
    <li data-target="section2" class="tab second"><a href="#">Due Today</a></li>
    <li data-target="section3" class="tab third"><a href="#">Due Tomorrow</a></li>
    <li data-target="section4" class="tab fourth"><a href="#">Due This Week</a></li>
    <li data-target="section5" class="tab fifth"><a href="#">Due This Month</a></li>
</ul>

和此：

$('document').ready(function () {
    var $tabs = $('.tab');
    $tabs.slice(1).hide();
    $('.tab').click(function () {
        var $target = $('#' + $(this).data('target')).show();
        $tabs.not($target).hide();
    });
});

Answer 3

在$(".first").hide()以外的所有功能中为您的代码$(".first").click(function(){.........})添加一行代码，以便您的javascript如下所示

使用Javascript：

     $(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) {
            $(".first").hide();
            $(".section2").toggle();
            $(".section1").hide();
            $(".section3").hide();
            $(".section4").hide();
            $(".section5").hide();                    
            f.preventDefault();
        });
    });

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

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

建议请尝试使用jquery ui标签或引导标签，而不是自己动手，它们为所有这些功能提供了很多支持。

Answer 4

我认为你在这里过于复杂。您需要做的就是添加和删除相应的css类以显示和隐藏当前活动选项卡。

您绝对不需要为每个标签链接添加click事件监听器。您可以在一个click事件侦听器中处理所有操作。

这是一个例子，试图模仿你的CSS。当然你会明白这一点。

(function (jQuery) {
  var tabLinks = $('.nav-tabs').find('a'),
      tabContent = $('.tab-content');

  function showTab(evt) {
    var tabToShow = $(this).attr('href'),
        prevTab = tabContent.children('.show-tab');
    tabLinks.removeClass('active');
    $(this).addClass('active');
    prevTab.removeClass('show-tab');
    tabContent.find(tabToShow).addClass('show-tab');
    evt.preventDefault();
  }

  tabLinks.on('click', showTab);
}($));

.container {
  color: #555;
  font-family: sans-serif;
  font-size: 14px;
  width: 600px;
}

.nav-tabs {
  list-style-type: none;
  padding: 0;
}

.nav-tabs:after {
  content: '';
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

.nav-tabs li {
  float: left;
}

.nav-tabs li a {
  border: 1px solid transparent;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  color: #3c7bc8;
  display: block;
  padding: 10px 14px;
  text-decoration: none;
}

.nav-tabs li a:hover {
  background-color: #f1f1f1;
  border-bottom: 1px solid #ccc;
}

.nav-tabs .active {
  background-color: white;
  border-color: #ccc;
  border-bottom-color: transparent;
  color: #555;
}

.nav-tabs .active:hover {
  background-color: white;
  border-bottom-color: transparent;
}

.tab-content {
  position: relative;
}

.tab-content div {
  position: absolute;
  top: -15px;
  display: none;
  z-index: -1;
}

.tab-content div.show-tab {
  border-top: 1px solid #ccc;
  display: block;
  padding: 5px 10px;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
  <ul class="nav nav-tabs" >
    <li><a class="active" href="#over-due">Over due</a></li>
    <li><a href="#due-today">Due Today</a></li>
    <li><a href="#due-tomorrow">Due Tomorrow</a></li>
    <li><a href="#due-this-week">Due This Week</a></li>
    <li><a href="#due-this-month">Due This Month</a></li>
  </ul>
  <div class="tab-content">
    <div class="show-tab" id="over-due">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo nobis voluptas, porro quos! Animi necessitatibus, perferendis ullam aliquam voluptatem itaque, expedita distinctio unde repudiandae, enim voluptas, similique. Sed, illo saepe!</p>
    </div>
    <div id="due-today">
      <p>Something for today.</p>
    </div>
    <div id="due-tomorrow">
      <p>Something for tomorrow.</p>
    </div>
    <div id="due-this-week">
      <p>Something for this week.</p>
    </div>
    <div id="due-this-month">
      <p>Something for this month.</p>
    </div>
  </div>    
</div>

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

4 个答案: