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

У меня есть пять вкладок, из которых первая вкладка является активной вкладкой. Нагрузка на страницу, когда пользователь нажимает на любую другую вкладку, а не на первую вкладке должно быть отображено сообщение об ошибке пользователю с использованием 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>

источник

2016-09-13 Ninad

Вы можете достичь этого, написав простой jquery. При запуске отключите все вкладки, кроме первой вкладки, а затем щелкнув любую вкладку, проверьте, нажата ли предыдущая вкладка или нет. если нет, то передайте сообщение еще активировать эту вкладку, оставив следующие вкладки отключенными – mahesh

-1

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

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

источник

2016-09-13 07:10:26 eyalewin

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

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

$(".tab-pane:not(.disabled)").click(function(){ 
    $(this).next().removeClass("disabled"); 
});

источник

2016-09-13 07:16:40

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

'preventDefault()' должен отменить щелчок и не запускать вашу функцию, чтобы триггеры щелчка –

создали скрипку, и я добавлю в нее свой код и покажу вам, как это работает –

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

ответ

Смежные вопросы