Не удается получить содержимое вкладки, чтобы показать с помощью jquery

Question

Я по-прежнему довольно новичок в jquery, поэтому я занимаюсь практикой, здесь я пытаюсь создать навигацию, которая отображает контент при нажатии каждой вкладки, но моя проблема здесь что контент не будет отображаться, я не уверен, что это потому, что я не использую правильные идентификаторы, или мой код неправильный. пожалуйста помоги.

Это мой HTML код:

<div id="tabs-1"> 
    <ul class="links"> 
     <li><a href="#tab1">tab1</a></li> 
     <li><a href="#tab2">tab2</a></li> 
     <li><a href="#tab3">tab3</a></li> 
     <li><a href="#tab4">tab4</a></li> 
     <li><a href="#tab5">tab5</a></li> 
    </ul> 


    <div class="tab-content"> 
     <div id="tab1" class="tab active" class="tab"> 
      <p>tab1</p> 
     </div> 

     <div id="tab2" class="tab"> 
      <p>tab2</p> 
     </div> 

     <div id="tab3" class="tab"> 
      <ptab3</p> 
     </div> 

     <div id="tab4" class= "tab"> 
      <p>tab4</p> 
      <p>tab4</p> 
      <p>tab4</p> 
      <UL> 
       <LI>tab4</LI> 
       <LI>tab4</LI> 
       <LI>tab4</LI> 
       <LI>tab4</LI> 
       <LI>tab4</LI> 
      </UL> 
     </div> 
    </div> 
</div> 

это style.css:

body { 
    background-color: #3399FF; 

} 

#tabs { 
    width: 100%; 
    display: inline-block; 
} 

.links: after { 
    display: block; 
    clear: both; 
    content: ''; 

} 

.links li { 
    margin: 0px 5px; 
    float: left; 
    list-style: none; 

} 

.links a { 
    padding:9px 15px; 
    display:inline-block; 
    border-radius:3px 3px 0px 0px; 
    background:#7FB5DA; 
    font-size:16px; 
    font-weight:600; 
    color:#4c4c4c; 
    transition: all linear 0.15s; 
} 

.links a:hover { 
    background: #a7cce5; 
    text-decoration: none; 
} 

li.active a, li.active a:hover{ 
    background: #fff; 
    color: #4c4c4c; 
} 

.tab-content { 
    padding: 100px; 
    border-radius: 10px; 
    box-shadow: -1px 1px 1px rgba(0,0,0,0.15); 
    background: #fff; 
} 

.tab { 
    display: none; 
} 

.tab .active { 
    display: block; 
} 

это мой jquery.js:

$(document).ready(function(){ 
    $('.links a').click(function(e){ 
     var attrValue= $(this).attr('href'); 

     $('#tabs' + attrValue).show().siblings().hide(); 

     $(this).parent('li').addClass('active').siblings().removeClass('active'); 

     e.preventDefault(); 
    }); 
}); 

Содержание не будет показывать

Answer 1

Изменить:

$('#tabs ' + attrValue).show().siblings().hide(); 

в

$(attrValue).show().siblings().hide(); 

Вы уже захватить ID в attrValue, поэтому нет необходимости добавляемых ничего #tabs.

jsFiddle

Answer 2

$('#tabs' + attrValue).show().siblings().hide(); 

вы ссылаетесь '#tabs'. Нет вкладок id, его класс, поэтому селектор $('.tabs'), но вам это не нужно. id уникальны, поэтому работают сами по себе как селекторы.

$(attrValue).show().siblings().hide();