アクティブなタブの代わりに他のタブをクリックするとエラーメッセージを表示する方法

最初のタブがアクティブなタブが5つあります。ユーザーが最初のタブではなく他のタブをクリックしたときにページが読み込まれますタブをクリックするとnotyプラグインを使用してエラーメッセージが表示され、アクティブなタブである最初のタブを最初にクリックする必要があります。ユーザーが最初のタブをクリックすると、2番目のタブは有効になりますが、同様に、ユーザが第3のタブをクリックすると、第4のタブを有効にし、最後のタブまで同様にする必要がある。ここでアクティブなタブの代わりに他のタブをクリックするとエラーメッセージを表示する方法

は、私はそれがそこにタブがあり、あなたは、タブ間のナビゲーションをブロックすることができ http://www.jquery-steps.com/

で使用されるbeeingて概念でそれを検索してみてください、との知っている私のコード

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

ですあなたはどのタブであるか。

出典

2016-09-13 07:10:26 eyalewin

最初のものを除いて、htmlのすべてのタブにクラス.disabledを追加します。次に、次のコードを追加します。

$(".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

ページの2番目のタブをクリックするとエラーが表示されますが、2番目のタブの内容は2番目のタブには表示されません最初のタブがクリックされていない限り。 – Ninad

'preventDefault（）'はクリックをキャンセルし、クリックトリガーの機能を実行しないでください –

フィドルを作成して、自分のコードを追加してどのように動作するかを表示します –

アクティブなタブの代わりに他のタブをクリックするとエラーメッセージを表示する方法

答えて

関連する問題