Saya mencoba menggunakan fitur kartu/tab bootstrap untuk membuat kartu tabulasi yang memiliki 3 tab, masing-masing sesuai dengan 'badan kartu' aktifnya sendiri.
Membuat kartu dengan benar, dan memang menampilkan tajuk tab yang sesuai dengan tautannya masing-masing.
Apa yang saya coba lakukan adalah membuatnya sehingga jika tab Instagram aktif, itu menunjukkan teks 'Instagram'. Sama untuk 2 lainnya. Saat ini mereka hanyalah tab yang tidak aktif dan badan tab utama menampilkan ketiga baris teks.
Javascript terlihat benar tetapi tidak ditabulasi dengan benar
Solutip
Anda perlu menggunakan markup yang sesuai untuk tab tab-contentdan tab-panemembuat tab berfungsi: https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior (tidak diperlukan jquery).
https://www.codeply.com/go/p5Zm4JA5jb
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#insta">Instagram</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#face">Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#twit">Twitter</a>
</li>
</ul>
</div>
<div class="tab-content card-body">
<div id="insta" class="tab-pane active">Instagram</div>
<div id="face" class="tab-pane">Facebook</div>
<div id="twit" class="tab-pane">Twitter</div>
</div>
</div>
Perhatikan keduanya dan nav-link atur itemnya .tab-pane active
