2017-04-20 35 views
0

自動入力ボックスを持つjqueryを使用してhtmlで機能を作成しています。自動補完でユーザーを選択すると、情報が表示されますが情報は表示されますが、正しく表示されます。以下jqueryによって作成されたDOM要素が表示されない

コード

function showcontent(data) { 
    if (data.responseText) { 
     var response = JSON.parse(data.responseText); 
     $('#name').html('<i class="ion-ios-person-outline profileicon"></i> ' + response.User.FullName); 
     $('#desig').html('<i class="ion-ios-briefcase-outline profileicon"></i> ' + response.User.Designation); 
     $('#dept').html('<i class="ion-ios-people-outline profileicon"></i> ' + response.User.Department); 
     $('#loc').html('<i class="ion-ios-location-outline profileicon"> ' + response.User.Location); 
     $('#phone').html('<i class="ion-ios-telephone-outline profileicon"></i> ' + response.User.Phone); 
     $('#email').html('<i class="ion-ios-email-outline profileicon"></i> ' + response.User.Email); 

     var tabs = []; 
     var tabContainer = []; 
     var ratings = []; 
     for (var i = 0; i < response.Ratings.length; i++) { 
      ratings.push('<div class="col-md-5ths col-xs-6"><center class="feedbackiconDiv"><div class="feed1"><img src="../Content/Images/' + response.Ratings[i].RatingImage + '" /></div><span class="captionImage1">' + response.Ratings[i].RatingName + '</span></center></div>'); 
     } 

     var ratingHTML = ratings.join(' '); 
     tabs.push('<ul class="tabs" style="">'); 

     tabContainer.push('<div class="tab_container">'); 
     for (var i = 0; i < response.Skills.length; i++) { 
      if (i === 0) { 
       tabs.push('<li class="active" data-toggle="tab" rel="tab' + i+1 + '">' + response.Skills[i].SkillName + '</li>'); 
       //tabContainer.push('<h3 class="d_active tab_drawer_heading" rel="tab' + i + 1 + '">' + response.Skills[i].SkillName + '</h3>'); 
      } else { 
       tabs.push('<li data-toggle="tab" rel="tab' + i + 1 + '">' + response.Skills[i].SkillName + '</li>'); 
       //tabContainer.push('<h3 class="tab_drawer_heading" rel="tab' + i + 1 + '">' + response.Skills[i].SkillName + '</h3>'); 
      } 

      tabContainer.push('<div id="tab' + i + 1 + '" class="tab_content"><p>' + response.Skills[i].Description + '</p><div class="row"><div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style=""><div class="row">' + ratingHTML + '</div></div></div></div>'); 
     } 

     tabs.push('</ul>'); 
     tabContainer.push('</div>'); 

     $('#feedbackTab').html(tabs.join(' ') + tabContainer.join(' ')); 
    } 

$( '#1 feedbackTab')HTML(tabs.join( ' ')+ tabContainer.join(''))です。

tabs[]見せているが、私はそれが正しいコードを示しブラウザで検査した後、コードを見たときtabContainerは、しかし、ブラウザに表示されていません。

彼らはtab_contentを隠している場合

答えて

0

ちょうどCSS、または任意のjsを確認して助けてください。

+0

ヒントのためのthnks私は問題を解決しました。実際には、タブの内容を隠すjsコードがあります。 –

関連する問題