I have tried everything I have found so far, unsure what's left. I just want to have two pills and change the content displayed depending on which one is clicked. Simple enough. I have tried copying exactly what is in the Bootstrap docs, as well as many other websites' solutions, all to no avail.
The code in my header.ejs file includes...
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- BOOTSTRAP AND CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/css/styles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
The code on the page in question is:
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">Test content 1</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">Test content 2</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">Test content 3</div>
</div>
But I have tried a few different solutions to try and solve this.
The bottom of that same file now also includes:
<script>
$(".nav li a").on("click", function() {
$(".nav li a").removeClass("active");
$(this).addClass("active");
});
</script>
Now this has made it so that the pill I click on changes color to the one I clicked on (which didn't use to happen), but the content displayed remains the same.
I am so lost. Willing to learn, but I have read that many websites and articles and videos to no avail yet.
You are missing the data-bs-target attribute on the anchor elements. this attribute should have the id of the pane that it is connected to. I have added the first one for you.
<a class="nav-link active" data-bs-target="#pills-home" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
Related
I am a beginner in web development. I am working on a small project which needs to open a url(something like http://192.168.1.107:8080) content on click of a tab, in the same tab pane. The mentioned url is a client, which displays some runtime data(eg: temperature) continuously.
I could find some code snippets on creating tabs, but I'm keen to get this specific requirement working.
I would appreciate any code snippets, links or information on displaying a url data in same tab pane please.
sorry for vague question, but this is how I could put it in the words.
This is the sample code I have:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="temp1-tab" data-toggle="tab" href="#temp1" role="tab" aria-controls="temp1" aria-selected="true">Temperature 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="temp2-tab" data-toggle="tab" href="#temp2" role="tab" aria-controls="temp2" aria-selected="false">Temperature 2</a>
</li>
<li class="nav-item">
<a class="nav-link" id="temp3-tab" data-toggle="tab" href="#temp3" role="tab" aria-controls="temp3" aria-selected="false">Temperature 3</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="temp1" role="tabpanel" aria-labelledby="temp1-tab">
Display temp1 <br />
<iframe src="http://192.168.1.107:5000/" title="Temp 2"></iframe>
</div>
<div class="tab-pane fade" id="temp2" role="tabpanel" aria-labelledby="temp2-tab">
Display Temp2
</div>
<div class="tab-pane fade" id="temp3" role="tabpanel" aria-labelledby="temp3-tab">
Display Temp3
</div>
</div>
<script>
$('.tab-link').on('click', function(event) {
// Prevent url change
event.preventDefault();
// `this` is the clicked <a> tag
$('[data-toggle="tab"][href="' + this.hash + '"]').trigger('click');
})
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
thanks
If you are trying to open a URLinside your website, you can use an iframe to do so. Sample example:
<iframe src="http://192.168.1.107:8080/" title="Tab 2"></iframe>
I have implemented tab using bootstrap, there are 3 tabs and each of them has contents in them, but while I am executing the code all the contents of active tab is not visible, content is visible only after any other tab is clicked, when checked on inspect element does not show active class.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="all-tab" data-toggle="tab" href="#all" role="tab" aria-controls="home" aria-selected="true">All</a>
</li>
<li class="nav-item">
<a class="nav-link" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Cash</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Miles</a>
</li>
</ul>
<div class="tab-content pt-3" id="myTabContent">
<div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">
Content.........
</div>
<div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
Content.........
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
Content.........
</div>
</div>
in inspect div element only shows three classes (class="tab-pane fade show") but not active class.
#conrad
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
add this script link to your shipify theme.liquid head section
<a class="nav-link active" id="all-tab" data-toggle="tab"
the data toggle need a unique id you do not mention it
you put the same data-toggle change relevant tab id
You need to add active class to li tag and add in class inside first div which you need to display
Demo Code :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<!--add active to li-->
<li class="nav-item active">
<a class="nav-link" id="all-tab" data-toggle="tab" href="#all" role="tab" aria-controls="home" aria-selected="true">All</a>
</li>
<li class="nav-item">
<a class="nav-link" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Cash</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Miles</a>
</li>
</ul>
<div class="tab-content pt-3" id="myTabContent">
<!--added class in-->
<div class="tab-pane fade active in" id="all" role="tabpanel" aria-labelledby="all-tab">
Content1.........
</div>
<div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
Content2.........
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
Content3.........
</div>
</div>
For example, assuming that the same tab as the above image exists, the 'Active' tab is specified as default.
However, my client wishes to keep this default option and open a new window that different tab will selected.(second 'Link' tab or something.)
Is this possible? If it can, how to do this?
assuming you are using Bootstrap, you can remove all the attributes related to tab behavior from the a.nav-link and instead use target:"_blank". Here in bellow example I have made added the New Page tab, there I have removed all the extra attributes and added target attribute.
This example may not work within this snippet since it is within the nested frame, and opening the _blank tab from nested tab would be messy, but it works on web page I have tested it.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://stackoverflow.com/" target="_blank">New Page</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home Page</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile Page</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact Page</div>
</div>
Assuming that you have div contains tab contents.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link" id="link1" data-toggle="tab" href="?section=tab1">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="link2" data-toggle="tab" href="?section=tab2">Tab 2</a>
</li></ul>
Pass your div id as parameter section as href of li.
<div id="tab1">
</div>
<div id="tab2">
</div>
Then get the parameter, and scroll manually to the div.
<script>
const params = new URLSearchParams(window.location.search);
const section = params.get('section');
if(section!=''){
$('#' + section).addClass('active');
$('html, body').animate({
scrollTop: $('#' + section).offset().top
}, 2000);
}else{
//Default tab here
$('#tab1').addClass('active');
$('html, body').animate({
scrollTop: $('#tab1').offset().top
}, 2000);
}
</script>
Hope this would help.
Good day guys, I need help,
When a link is clicked on another page I need the tab to be displayed after the page loads, I've seen this being done using the hash #id but is there any possible way to do this with the data-filter as they're the ones controlling the tabs?
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul class="nav nav-pills" id="filters">
<li class="active">All</li>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</div>
</div>
</div>
You could pass special request parameter in query string. Then get the parameter value and activate corresponding tab.
For example, add tab-name into query string of target URL (the full relative URL is /my-page?tab-name=profile). Following expression returns value of the parameter, that equals to 'profile':
var tabName = (window.location.href.match(/[?&]tab-name=[^&$]+/i) || '=').split('=')[1];
If tab-name is omitted the expression returns empty string.
Then select navigation tab by received value and activate its associated pane using show method.
var tabName = (window.location.href.match(/[?&]tab-name=[^&$]+/i) || '=').split('=')[1];
tabName='profile'; // remove this line on real page
if(tabName.length)
$('#myTabs .nav-link[href="#' + tabName + '"]').tab('show');
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<ul class="nav nav-pills" id="myTabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
<div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>
Note, in the snippet I set value of tabName directly, because it is not possible to send custom request to the snippet. So, you have to remove tabName='profile'; on your real page.
I'm using bootstrap 4 for a little project, I'm looking to have a system of "tabs", which is very well done on Bootstrap. the problem is that I try to redirect the use on a particular TAB. Do it via IDs and the <a> tag in html does not work and I do not have any knowledge of JS.
Here are the tabs :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
</li>
<li class="nav-item" id="mdr">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">TAB 1</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">TAB TWO</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">Three TABS</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
I would like with a link to be able to change the tab of the user (by a link) without clicking on the tab :(
Thank you!
Have you tried to redirect the user to page-URL#tab_id?
If this does not work, I have tried the solution post at https://codepen.io/rnr/pen/dMNZmx It works well in my test.
Just copy the JS code to your HTML file, put it in between an open and a close script tag. like this (after loading the jquery package, i.e. after your code shown above. ):
<script>
/* COPY THE JS CODE HERE */
</script>