Как отобразить сообщение об ошибке, когда пользователь нажимает на другие вкладки вместо активных вкладок

У меня есть пять вкладок, из которых первая вкладка является активной вкладкой. На странице загрузки, когда пользователь нажимает на любую другую вкладку, а не на первую вкладку, сообщение об ошибке должно отображаться пользователю с помощью плагина noty, который он должен "сначала нажать на первая вкладка, которая является активной вкладкой. Когда пользователь нажимает на первую вкладку, тогда должна быть включена вторая вкладка, но не третья и четвертая, аналогично, когда пользователь нажимает на третью вкладку, четвертая вкладка должна быть включена и так далее до последняя вкладка.

Вот мой код

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="jquery.noty.packaged.js"></script>


</head>
<body>

<div class="container">

    <!-- Nav tabs -->
    <ul id="mytabs" class="nav nav-tabs" role="tablist">
      <li class="active">
          <a href="#first" role="tab" data-toggle="tab">
              <i class="fa fa-home"></i> First tab
          </a>
      </li>
      <li class="disabled disabledTab second" ><a href="#second" role="tab" data-toggle="tab">
          <i class="fa fa-user"></i> Second tab
          </a>
      </li>
      <li>
          <a href="#third" role="tab" data-toggle="tab">
              <i class="fa fa-envelope"></i> Third tab
          </a>
      </li>
      <li>
          <a href="#fourth" role="tab" data-toggle="tab">
              <i class="fa fa-envelope"></i> Fourth tab
          </a>
      </li>
      <li>
          <a href="#fourth" role="tab" data-toggle="tab">
              <i class="fa fa-envelope"></i> Fifth tab
          </a>
      </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane fade active in " id="first">
          <h2>First tab</h2>
      </div>
      <div class="tab-pane fade disabled" id="second">
        <a href="javascript:show_create_case_msg();">
          <h2>Second tab</h2>
      </div>
      <div class="tab-pane fade" id="third">
          <h2>Third tab</h2>
      </div>
      <div class="tab-pane fade" id="fourth">
          <h2>Fourth tab</h2>
      </div>
       <div class="tab-pane fade" id="fifth">
          <h2>Fifth tab</h2>
      </div>

    </div>

</div>

</body>
</html>
Источник

2 ответа

Добавить класс .disabled на все вкладки в HTML, кроме первой. Затем добавьте следующий код:

$(".disabled").click(function(e){
     e.preventDefault();
     show_create_case_msg();
});

$(".tab-pane:not(.disabled)").click(function(){
    $(this).next().removeClass("disabled");
});
Источник

Я хотел бы попытаться найти его в концепции, используемой в http://www.jquery-steps.com/

там есть вкладки, вы можете заблокировать навигацию между вкладками и узнать, на какой вкладке вы находитесь.

Источник
Другие вопросы по тегам