タブが機能しない

Question

2つのタブ（BioおよびTimeline）を持つ簡単なアプリケーションを作成しています。それぞれに独自のコンテンツがあります。私はクリックした内容に基づいてコンテンツを表示/非表示にしたい。私のHTML、CSSやJSファイルは、以下のとおりである -

$(document).ready(function() { 
 
    $('.tablink').on('click', function(e) { 
 
    var currentAttrValue = $(this).attr('href'); 
 

 
    // Show/Hide Tabs 
 
    $('.dashfolio-about' + currentAttrValue).show().siblings().hide(); 
 

 
    // Change/remove current tab to active 
 
    $(this).addClass('active').siblings().removeClass('active'); 
 

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

.about-header-container { 
 
    margin-left: 80px; 
 
    margin-top: 10px; 
 
    font-size: 15px; 
 
} 
 
.about-header-container>a { 
 
    padding-right: 10px; 
 
} 
 
#bio-dashfolio { 
 
    margin-top: 20px; 
 
} 
 
.tablink:active { 
 
    color: red; 
 
} 
 
.tabcontent { 
 
    display: none; 
 
} 
 
.tabcontent.active { 
 
    display: block; 
 
}

<div class="dashbolio-about"> 
 

 
    <div class="about-header-container"> 
 
    <a class="bio-header tablink" href="#bio-dashfolio"> Bio </a> 
 
    <a class="timeline-header tablink" href="#timeline-dashfolio"> Timeline </a> 
 
    </div> 
 
    <div> 
 
    <div class="tabcontent" id="bio-dashfolio"> 
 

 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor sodales suscipit in in metus. Proin laoreet eros nibh, ut hendrerit diam pharetra at. Morbi id nisi efficitur, vehicula turpis non, tristique sapien. Sed sed 
 
     vestibulum massa. Vestibulum fringilla tortor id facilisis tempus. Cras consectetur sapien nibhLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor sodales suscipit in in metus. Proin laoreet eros nibh, ut hendrerit 
 
     diam pharetra at. Morbi id nisi efficitur, vehicula turpis non, tristique sapien. Sed sed vestibulum massa. Vestibulum fringilla tortor id facilisis tempus. Cras consectetur sapien nibhLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus 
 
     vitae diam non dolor sodales suscipit in in metus. Proin laoreet eros nibh, ut hendrerit diam pharetra at. Morbi id nisi efficitur, vehicula turpis non, tristique sapien. Sed sed vestibulum massa. Vestibulum fringilla tortor id facilisis tempus. 
 
     Cras consectetur sapien nibhLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor</p> 
 

 
    </div> 
 
    <div class="tabcontent" id="timeline-dashfolio"> 
 
     <p>Random text is awesome don't you think?!</p> 
 
    </div> 
 
    </div> 
 
</div>

（https://jsfiddle.net/m25owpse/）

これはしかし、トリックをやっていません。私は正しい軌道に乗っていると思うので、どこに間違っているのか理解してください。前もって感謝します！

Answer 1

あなたの問題は、この行である：

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

スニペット：へ

$('.dashfolio-about' + currentAttrValue).show().siblings().hide(); 

変更

あなたはアクティブなクラスを追加します

$(document).ready(function() { 
 
    $('.tablink').on('click', function(e) { 
 
    var currentAttrValue = $(this).attr('href'); 
 

 
    // Show/Hide Tabs 
 
    $(currentAttrValue).show().siblings().hide(); 
 

 
    // Change/remove current tab to active 
 
    $(this).addClass('active').siblings().removeClass('active'); 
 

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

.about-header-container { 
 
    margin-left: 80px; 
 
    margin-top: 10px; 
 
    font-size: 15px; 
 
} 
 

 
.about-header-container>a { 
 
    padding-right: 10px; 
 
} 
 

 

 
#bio-dashfolio { 
 
    margin-top: 20px; 
 
} 
 

 

 
.tablink:active { 
 
    color: red; 
 
} 
 

 
.tabcontent { 
 
    display:none; 
 
} 
 

 
.tabcontent.active { 
 
    display:block; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<div class = "dashbolio-about"> 
 

 
    <div class= "about-header-container"> 
 
     <a class = "bio-header tablink" href= "#bio-dashfolio"> Bio </a> 
 
     <a class = "timeline-header tablink" href= "#timeline-dashfolio"> Timeline </a> 
 
    </div> 
 

 
    <div> 
 

 

 
     <div class = "tabcontent" id= "bio-dashfolio" > 
 

 
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor sodales suscipit in in metus. Proin laoreet eros nibh, ut hendrerit diam pharetra at. Morbi id nisi efficitur, vehicula turpis non, tristique sapien. Sed sed vestibulum massa. Vestibulum fringilla tortor id facilisis tempus. Cras consectetur sapien nibhLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor sodales suscipit in in metus. Proin laoreet eros nibh, ut hendrerit diam pharetra at. Morbi id nisi efficitur, vehicula turpis non, tristique sapien. Sed sed vestibulum massa. Vestibulum fringilla tortor id facilisis tempus. Cras consectetur sapien nibhLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor sodales suscipit in in metus. Proin laoreet eros nibh, ut hendrerit diam pharetra at. Morbi id nisi efficitur, vehicula turpis non, tristique sapien. Sed sed vestibulum massa. Vestibulum fringilla tortor id facilisis tempus. Cras consectetur sapien nibhLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor </p> 
 

 
     </div> 
 

 
     <div class = "tabcontent" id = "timeline-dashfolio"> 
 

 
      <p> Random text is awesome don't you think?! </p> 
 

 

 
     </div> 
 
    </div> 
 

 
</div>