I'm trying to link to specific tabs using flickity.css http://flickity.metafizzy.co/ and i'm having trouble. I know this has been a common problem using php but is there a known method (possibly using javascript) to create unique urls for all of the tabs created inside of "nav nav-tabs"? I'm trying to use a redirect to link to a certain tab after an event is completed. Using php would there be a way to path to that specific event?
<ul class="nav nav-tabs" id = "tab-style">
<li class = "active"><a data-toggle = "tab" href = "#profile"></li>
<li><a data-toggle = "tab" href = "#friends"></a></li>
<li><a data-toggle = "tab" href = "#games"></a></li>
<li><a data-toggle = "tab" href = "#context"></a></li>
</ul>
That is the code for creating the tabs all inside the same html file. The divs are created in the standard way. For example.
<div id = "profile" class "tab-pane fade in active">
tab contents
</div>
<div id="friends" class="tab-pane fade">
</div>
and so on...
Related
I am new to bootstrap and I am currently playing around with a tab/navigation system. This is what I have for the tabs and the tabs content so far:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
<ul class="nav nav-tabs">
<li class="nav active">A</li>
<li class="nav">B</li>
<li class="nav">C</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="A">Content inside tab A</div>
<div class="tab-pane fade" id="B">Content inside tab B</div>
<div class="tab-pane fade" id="C">Content inside tab C</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Questions
I want to link directly to one of the tabs. E.g. www.mysite.com/mypage#B or www.mysite.com/mypage/#B should directly open tab B.
When clicking on tabs the URL needs to change to corresponding #id to be able to get to the current tab when refreshing the page.
I got 1 to work by JS and to check for what is after # in the URL and then via php have an if statement on each nav to see if it should be active or not, and same for the tab-panes. However, that doesn't solve problem 2.
How can I solve this nicely? Or should I skip Bootstrap and just create my own navigation with some JS?
A few things first:
You tagged your question with both bootstrap-4 and bootstrap-5, but you're actually using bootstrap-3. My solution below works for Bootstrap 3, but requires changes for Bootstrap 5 that uses the data-bs-target attribute.
The version of jQuery (1.11) you're using is from 2014. I recommend using a more recent version (3.6.3).
To solve problem 1 and 2, add the following jQuery script:
var hash = window.location.hash;
$(".nav-tabs").find("li a").each(function(key, value) {
if (hash === $(value).attr('href')) {
$(value).tab('show');
}
$(value).click(function() {
location.hash = $(this).attr('href');
});
});
This will
Get the hash from the url;
Loop through each nav-tab li a element;
If the hash matches with the href attribute of one of the tabs: show it;
Attaches a click event handler on all tabs, changing the url hash using its href attribute when fired.
For other solutions, take a look at this SO question.
I am working on a project that allows a user to check off boxes per tab that is created through jQuery. The tabs are created when a user clicks on the Add button. Jquery generates a set of checkboxes per tab and should allow the user to check any number of boxes they want. The issue is that it looks like they share the same checkboxes since checking boxes in one tab transfers it over to the other tab. Is this something for Session Storage? Do I have to give each checkbox a unique name? Not quite sure if this is possible with just jQuery.
I realize that something like this would be easier using a stack but I am doing this to get a better understanding of that process.
Git: https://github.com/frfroylan/project_checklist
Link: http://proj-checklist.surge.sh/
HTML:
<body onload="script()">
<h1 class="h1-text">Product Checklist</h1>
<div class="wrapper">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="tabs">
<li role="presentation" class="active" id="newTab"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></li>
</ul>
<!-- Tab info -->
<div class="tab-content" id="tab-content">
<div role="tabpanel" class="tab-pane active" id="new">
<p>New Product name:</p>
<input type="text" placeholder=" Product Name" id="newProductName">
<button onclick="genLi()">Add</button>
</div>
</div>
</div>
</body>
JS:
script = function(){
newTabPanel = $('#new');
newTab = $('#newTab');
genLi = function(){
$('.active').removeClass('active');
var prodName = $('#newProductName').val();
var newLi = $('<li role="presentation" class="active" id="newTab">'+ prodName +'</li>');
newTab.before(newLi);
genNewTabCont(prodName);
}
genNewTabCont = function(id){
var newTabPane = $('HTML_TO_LONG_CHECK_GIT');
newTabPanel.before(newTabPane);
}
}
As you already noticed the error does not occur, when you choose different names. DOM manipulation with jQuery is all about selectors. If you just use an data-attribute or class as selector your jQuery call will affect all matched elements. If you want every tab to be unique, you have to create unique ID selectors or reference them by their position.
$('.tab').eq(position);
I have created a one page website. When i click on menu it go to particular div tag. When I right click on menu & click on 'open in new tab' it opens url "www.mysite.com/#" instead it should open "www.mysite.com/#show-3".
Please help me with this......soon
/**************Script used to open Different menu div on page*********************/
$(".menu a").click(function(){
var id = $(this).attr('class');
id = id.split('-');
$("#menu-container .content").hide();
$("#menu-container #menu-"+id[1]).addClass("animated fadeInDown").show();
return false;
});
<div class="menu-wrapper">
<ul class="menu">
<li><a class="show-1" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">About Us</a></li>
<li><a class="show-2" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">Rooms</a></li>
<li><a class="show-3" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">Reservation</a></li>
<li><a class="show-4" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">Gallery</a></li>
<li><a class="show-5" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">Contact Us</a></li>
</ul> <!-- /.menu -->
</div>
This will work
<a target="_blank" href="yourlink">Link</a>
In your case
<div class="menu-wrapper">
<ul class="menu">
<li><a target="_blank" class="show-1" href="#">About Us</a></li> <li><a target="_blank" class="show-2" href="#">Rooms</a></li>
<li><a target="_blank" class="show-3" href="#">Reservation</a></li>
<li><a target="_blank" class="show-4" href="#">Gallery</a></li>
<li><a target="_blank" class="show-5" href="#">Contact Us</a></li>
</ul> <!-- /.menu -->
</div>
The "open in new tab" button in most browsers will follow standard hyperlink rules, meaning that they will open the href of the tag. A one page site usually manages all it's content with javascript and dynamic html generation. The open in new tab function doesn't know how to handle this.
What you are going to have to do is write routing and html generation logic, give all of your links actual href attributes, not just hashtags. For normal page navigation, you can return false whenever a user clicks on a link so that you can perform your normal one page logic, but when someone forces the browser to navigate to the href location (as in opening in a new tab), you will have an actual page with your div displayed there.
Please Try this fiddle
Demo
Just make minor change in your a tag
<a href="#" target="_blank">
You can give divs id:
<div id="show-1">About Us Content</div>
And create hyperlinks like:
<a class="show-1" target="_blank" href="yourPage.html#show-1">About Us</a></li>
This will open your div directly in new tab.
The thing about what you are trying to do is that, if you want to open just that particular div in a new web page, it isn't a 1 page site anymore. It is a NEW page with that div content.
Regarding your code, the
... href="your new page link here"
that " # " of yours is the link (or in a more technical term, it will append that link to your base url on your current page. Which resulted on
it going to "www.mysite.com/#" The reason why it shows the same page instead of just a new page is simply because # is not to link to a new page but to an element in your current page on any event (such as an onclick). You can get more details on that here
But like the other answers had mentioned, if you want to open a new tab (aka page), you have to have another page. Which also means this will no longer be a 1 page website.
I am trying not to trigger bootstrap tab click in asp.net. Here is my HTML
<div class="addNewTab">
<ul class="nav nav-tabs tabs" data-tabs="tabs">
<li id="li1" class="deactiveLink"><a href="#tabBasicInfo" onclick="return getit();"
data-toggle="tab">Step 1: Details<span> </span></a></li>
li id="li2" class="deactiveLink"><a href="#tabAdditionalInfo" onclick="return getit();"
data-toggle="tab">Step 2: Photos<span></span></a></li>
<li id="li3" class="deactiveLink"><a href="#tabAdditionalFeature"
onclick="return getit();" data-toggle="tab">Step 3:Add. Info <span></span></a>
</li>
<li id="li4" class="deactiveLink"><a href="#tabPreview" onclick="return getit();"
data-toggle="tab">Step 4: Preview<span></span></a></li>
</ul>
</div>
and here is my javascript function
function getit() {
return false;
}
I have tried this in getit()
$('.addNewTab >.nav-tabs > li:nth-child(5)').find('a').trigger('click');
I am new to Bootstrap therefore I am unable to do my task. I do not want to use divs for that. I want to use tab which cannot be clicked. Am I missing something here in my code? What do I need to do?
According to bootstrap 3 docs http://getbootstrap.com/javascript/#tabs you can active the tabs either manually be javascript or by adding data-toggle="tab" or data-toggle="pill" on an element.
So you can not add the data-toggle="tab" or data-toggle="pill" but rather active them with javascript when you need it.
As already mentioned in the comments you can remove the href from <a> elements to prevent browser's attemts to navigate to a given url on click, or assign onclick handler to these a elements and use event.preventDefault()
In a page where I have n tabs, and the following script (coffeescript, I checked the compiled javascript and it seems to be ok)...
$ ->
init()
init = ->
$('a[data-toggle="tab"]').on 'shown', (event) ->
shown = event.target
console.log("Showing tab: " + shown)
Now, the 'shown' event does not fire on page load, so for the first tab being shown on the page there's no way to handle this (ie: loading content via xhr)
I tried adding this to the above script, to see if triggering it manually could work:
$('a[data-toggle="tab"]:first').tab 'show'
... but it didn't.
This is the HTML code I use in my view
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
<%=t :updates, :scope => 'user.profile.sections'%>
</li>
<li class="">
<%=t :activity, :scope => 'user.profile.sections'%>
</li>
<li class="">
<%=t :articles, :scope => 'user.profile.sections'%>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="updates">
</div>
<div class="tab-pane" id="activity">
</div>
<div class="tab-pane" id="articles">
</div>
</div>
</div>
Any clue?
Try leaving the class active off both the tab <li> and the content <div>. One of the first lines of code in the show() method is to short-circuit if the tab being requested is already active.
JSFiddle
You can trigger the event manually when you tell the page to show the tab:
$('a[data-toggle="tab"]:first').trigger("shown.bs.tab");
I think you are mixing Bootstrap Javascript Toggable tabs and Basic tabs managed by classes and id's
In case you want to use Javascript to manage the tabs you should delete the data-toggle="tab" from the anchors on the LI elements as shown here: http://getbootstrap.com/2.3.2/javascript.html#tabs
You can compare the syntax with basics tabs: http://getbootstrap.com/2.3.2/components.html#navs
After my
$("#modal").modal('show');
I added this and it worked just fine:
$('a[data-toggle="tab"]:first').click();