show hideタブで作業していません

Question

タブ付き機能で検索機能を作成しようとしています。それは現在罰金を示しています。エラーは全くありません。 問題は、他のタブのコンテンツの一部を表示/非表示にする必要があるタブをクリックしたい場合です。 divをクリックするたびに、divコンテンツを表示していますが、何も表示していないか表示していません。

<div id="newsearchs" class="row"> 
     <div class="row"> 
      <div class="col-xs-12"> 
       <ul id="myTab" class="nav# nav-tabs test"> 
        <li class="active"><a href="#" id="pep">People</a> 

        </li> 

       <li><a href="#" name = "job" id="job">Jobs</a> 

       </li> 
       <li><a href="#" id="loca" name = "loca">Location</a> 

       </li> 

      </ul> 
     </div> 
    </div> 
    <div class="col-xs-12"> 
     <div class="input-group input-group-md"> 
      <input type="text" id= "search_value" class="form-control " placeholder="Search for ..."> 
      <input name="search_location" id="search_location" placeholder="Location" class="form-control txt-auto"/> 

      <div id="people" class="input-group-btn"> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Looking For <span class="caret"></span> 

       </button> 
       <ul class="navbar-custom-menu dropdown-menu pull-right"> 
        <li><a href="#">Student</a> 

        </li> 
        <li><a href="#">Teacher</a> 

        </li> 
        <li><a href="#">Institue</a> 

        </li> 
       </ul> 
      </div> 
      <div id="jobs" class="input-group-btn"> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Brief format <span class="caret"></span> 

       </button> 
       <ul class="navbar-custom-menu dropdown-menu pull-right"> 
        <li><a href="#">Brief format</a> 

        </li> 
        <li><a href="#">Detailed format</a> 

        </li> 
        <li><a href="#">Citesummary</a> 

        </li> 
        <li><a href="#">LaTeX (EU)</a> 

        </li> 
       </ul> 
      </div> 
      <div id="locations" class="input-group-btn"> 
       <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Brief format <span class="caret"></span> 

       </button> 
       <ul class="navbar-custom-menu dropdown-menu pull-right"> 
        <li><a href="#">Brief format</a> 

        </li> 
        <li><a href="#">Detailed format</a> 

        </li> 
        <li><a href="#">Citesummary</a> 

        </li> 
        <li><a href="#">LaTeX (EU)</a> 

        </li> 
       </ul> 
      </div> 
      <!-- /btn-group --> <span class="input-group-btn"> 
     <button class="btn btn-default" type="submit"> <span class="glyphicon glyphicon-search"></span> 

      </button> 
      </span> 
     </div> 

ここには現在動作していないjqueryコードがあります。

<script type="text/javascript"> 
$('#jobs').hide(); 
$('#locations').hide(); 
$('#search_location').hide(); 

$('#myTab a').click(function (e) { 
    e.preventDefault(); 
    if (!($(this).attr('id') == 'pep')) { 
     $('#search_location').hide(); 
     $('#search_value').show(); 
     $('#people').show(); 
     $('#jobs').hide(); 
     $('#locations').hide(); 
    } 
    $(this).tab('show'); 
}) 
</script> 

<script type="text/javascript"> 
$('#myTab b').click(function (e) { 
    e.preventDefault(); 
    if (!($(this).attr('id') == 'job')) { 
     $('#search_location').hide(); 
     $('#search_value').show(); 
     $('#jobs').show(); 
     $('#people').hide(); 
     $('#locations').hide(); 
    } 
    $(this).tab('show'); 
}) 
</script> 

<script type="text/javascript"> 
$('#myTab c').click(function (e) { 

    e.preventDefault(); 
    if (!($(this).attr('id') == 'loca')) { 
     alert('Hi'); 
     $('#search_location').show(); 
     $('#search_value').hide(); 
     $('#locations').show(); 
     $('#jobs').hide(); 
     $('#people').hide(); 
    // } 
    $(this).tab('show'); 

}) 
</script> 

発射されていない$('#myTab c').click(function (e) {私によります。 私は間違っていることを教えてください。

Answer 1

多くのHTMLとJSの書式設定の問題があります。

1. あなたはすなわち、3番目のタブショーの呼び出し前にクローズ{をコメントアウトしています。 // }の場合は、コメントを外す必要があります

2. あなたは存在しないhtml要素を参照しています。

3. はあなた

   、その場合には、あなたのコードの多くを組み合わせることができ、#myTab bと#myTab cタグ<b>と<c>のHTML要素を探すためにしようとしているが、あなたは<a>タグにハンドラをアタッチしようとしている文が表示された場合idが何かと等しくないときに、タブの変更ごとに2つの表示/非表示がトリガーされることを意味する場合は、これらのイベントは個別に各タブのクリックイベントを扱うようにすることが理想的です（

4. 未開封<div>タグの数があり、迷子の#myTab要素のクラス定義で

JSFIDDLE

JS

$(function() { 
    $('#jobs').hide(); 
    $('#locations').hide(); 
    $('#search_location').hide(); 

    $('#myTab a').click(function(e) { 
     e.preventDefault(); 
     if (($(this).attr('id') == 'pep')) { 
      $('#search_location').hide(); 
      $('#search_value').show(); 
      $('#people').show(); 
      $('#jobs').hide(); 
      $('#locations').hide(); 
     } 
     if (($(this).attr('id') == 'job')) { 
      $('#search_location').hide(); 
      $('#search_value').show(); 
      $('#jobs').show(); 
      $('#people').hide(); 
      $('#locations').hide(); 
     } 
     if (($(this).attr('id') == 'loca')) { 
      $('#search_location').show(); 
      $('#search_value').hide(); 
      $('#locations').show(); 
      $('#jobs').hide(); 
      $('#people').hide(); 
     } 
     $(this).tab('show'); 
    }) 
})