so i try to href links with specific table IDs so that when the link is opened the specific table id called will be the active tab opened( ie. www.gohome.com/html#profile). but no matter what i do the active tab still remains stagnant and specifically calling out tab id's dont seem to do anything. This is my code:
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="profile">
<div class="single-service">
<h3>me</h3>
</div>
</div>
<div role="tabpanel" class="tab-pane " id="messages">
<div class="single-service">
<h2>you</h2>
</div>
</div>
</div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">me </a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">you</a></li>
</ul>
im starting to think it cant be done without me implementing some sort of script. but im not that good at coding. any form of help will be great. thanks n advance.
The trick in your case may be your references. You need to add JavaScript references for jQuery and bootstrap.js at the top of your html. That is what is doing the magic behind the functionality of showing and hiding different content based on the clicked tab.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
Here's a full working example of your code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">
<a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">me </a>
</li>
<li role="presentation">
<a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">you</a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="profile">
<div class="single-service">
<h3>me</h3>
</div>
</div>
<div role="tabpanel" class="tab-pane " id="messages">
<div class="single-service">
<h2>you</h2>
</div>
</div>
</div>
</body></div>