On the product page of an ecommerce store I'm trying to switch to another tab based on the click of a hyperlink.
So from a product description, I have a "Read the FAQ" link, that once clicked, I would like to automatically switch to the FAQ tab.
See here: http://www.lifestyleclotheslines.com.au/austral-addaline-35-foldown-clothesline
I tried to replicate the basics of this fiddle but didn't have much luck, I'm sure I was doing something wrong.
$(document).ready(function() {
$('#myTabs').tabs();
$('#showTab1').click(function() {
$('#myTabs').tabs('select', '#tabone');
});
$('#showTab2').click(function() {
$('#myTabs').tabs('select', '#tabtwo');
});
});
http://jsfiddle.net/zEwQz/495/
Any help would be awesome.
Thanks!
<div id="myTabs">
<ul class="tabs">
<li>Tab One</li>
<li>Tab Two</li>
<li>Faq Tab</li>
</ul>
<div id="tabone">You've selected Tab 1</div>
<div id="tabtwo">You've selected Tab 2</div>
<div id="faqtab">You've selected Faq Tab</div>
</div>
Read the FAQ
<input type="button" id="showTab1" value="Show tab 1"/>
<input type="button" id="showTab2" value="Show tab 2"/>
$(document).ready(function() {
$('#myTabs').tabs();
$('#showTab1').click(function() {
$('#myTabs').tabs('select', '#tabone');
});
$('#showTab2').click(function() {
$('#myTabs').tabs('select', '#tabtwo');
});
$('#showFaqTab').click(function() {
$('#myTabs').tabs('select', '#faqtab');
});
});
Not Sure what are you looking for. Please have a look on the updated fiddle
http://jsfiddle.net/zEwQz/500/
You are having same id attribute for both anchor link and the button i.e. (there would be unique ID for an element on the web page)
Read the FAQ
<input type="button" id="showTab2" value="Show tab 2"/>
Try to change it and it will work.
Read the FAQ
<input type="button" id="showTab2" value="Show tab 2"/>
$(document).ready(function() {
$('#myTabs').tabs();
$('#showTab1').click(function() {
$('#myTabs').tabs('select', '#tabone');
});
$('#showTab2').click(function() {
$('#myTabs').tabs('select', '#tabtwo');
});
$('#lnkshowTab2').click(function() {
$('#myTabs').tabs('select', '#tabtwo');
});
});
DEMO
Related
I have an issue with triggering the click event of one of the elements, i added to my Jquery tab. As you know, when one of the links in a Jquery tab is clicked, it changes the content of a specified div to the contents of the div with an id specified in the '<a> </a>' of one of the Jquery tab elements (in this case the one that has just been clicked)..
What I want to do is trigger the click event on this element (i.e the Jquery tab group element that has just been clicked) when i click another element in my document (i.e the element with the id #viewClassesNavBtn).
-------This the call back function code snippet ------
$(document).ready(function(){
$("#viewClassesNavBtn").click(function(){
<!-- $("#dasCBtn").click();-->
document.getElementById('dasCBtn').click();
});
});
------This is the jquery tab ui section------
<ul id="tabs_ul" style="background-color:transparent; border:none;">
<li class="dashBBtn" id="dasBtn">Dash Board</li>
<span class="divider">|</span>
<li class="dashBBtn" id="dasCBtn">Classes</li>
<span class="divider">|</span>
<li class="dashBBtn" id="dasPBtn">Profile</li>
<span class="divider">|</span>
<li class="dashBBtn" id="dasBStn"> Settings</li>
</ul>
When I click the element with id #viewClassNavBtn, I expect it to simulate the tab switching event of the JQuery UI but it doesn't. I get the feeling it is not possible, but I am inexperienced with JQuery UI tabs and stuff, so if it is possible, please help.
jQuery UI is not attaching the click event to the li items, it's attaching it to the link. Simply move the id tags onto the link and problem solved. Included a function to simulate a mouse click instead of relying on the technically obsolete .click() method (which doesn't seem to show any signs of going away)
function clickTab(tab) {
let click = new MouseEvent('click', {
bubbles: true,
cancelable: true,
synthetic: true,
view: window
});
tab.dispatchEvent(click);
}
$( function() {
$( "#tabs" ).tabs();
$(".navBtn").click(function() {
let tab = document.getElementById(this.dataset.for);
if (document.getElementById("simulate").checked) {
clickTab(tab);
} else {
tab.click();
}
});
});
<head>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li class="dashBBtn"><a id="dasCBtn" href="#tabs-1">Nunc tincidunt</a></li>
<li class="dashBBtn"><a id="dasPBtn" href="#tabs-2">Proin dolor</a></li>
<li class="dashBBtn"><a id="dasBStn" href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Stuff in the C tab</p>
</div>
<div id="tabs-2">
<p>Stuff in the P tab</p>
</div>
<div id="tabs-3">
<p>Stuff in the S tab</p>
</div>
</div>
<div>
<button class="navBtn" type="button" data-for="dasCBtn">C</button>
<button class="navBtn" type="button" data-for="dasPBtn">P</button>
<button class="navBtn" type="button" data-for="dasBStn">S</button>
<input id="simulate" type="checkbox" checked>
</div>
</body>
I have a drop down menu within a header using Bootstrap data-toggle="dropdown". When you click the drop down button, a list should appear. When you click the header, the content should slide up and down.
The problem is, when I click the drop down button it also triggers the header. The usual answer here is e.stopPropagation but when I use that, it also stops the drop down menu from appearing.
How can I prevent the dropdown button from triggering the header?
HTML
<div id="top">
<div class="dropdown">
<button type="button" class="dropdown-toggle" data-toggle="dropdown">
Show List
</button>
<ul class="dropdown-menu">
<li>Some Item</li>
<li>Some Item</li>
<li>Some Item</li>
</ul>
</div>
</div>
<div id="content" class="collapse">
This is the actual content
</div>
JS
// CANNOT USE BOOTSTRAP DATA-TARGET !
$('#top').click(function() {
$('#content').collapse('toggle')
})
$('button').click(function(e) {
//e.stopPropagation();
})
I have prepared a fiddle that illustrates this issue.
You should instead filtering regarding event.target of click on #top element:
$('#top').click(function(e) {
if($(e.target).closest('button[data-toggle], .dropdown-menu').length) return;
$('#content').collapse('toggle')
})
-jsFiddle-
You can do this as well.
// CANNOT USE BOOTSTRAP DATA-TARGET !
$('#top').click(function(e) {
if(e.target.type != "button"){
$('#content').collapse('toggle')
}
})
$('button').click(function(e) {
//e.stopPropagation();
})
Another way to do it, use e.target to determine if the clicked element is #top:
$('#top').click(function(e) {
if(e.target.id=="top"){
$('#content').collapse('toggle')
}
})
$('button').click(function(e) {
//e.stopPropagation();
})
I'm working on a custom solution, so I thought I would ask the community if anyone has use jQuery Tabs for this purpose before.
The idea is this: I have one main panel, a form with inputs. There are multiple tabs which basically identify different records. All the records will use this form, thats why I just want to load it once, instead of for each tab.
I put a basic example of the direction I want to go. As you can see there are 3 tabs but only one panel. I want to dynamically load content into the_input depending on which tab I click. SO i don't even want to switch the panel, just the selected tab on each click.
I was thinking I need to catch the beforeActivate (http://api.jqueryui.com/tabs/#event-beforeActivate) event, identify which tab was selected, and dynamically alter the 1 visual panel accordingly.
The code isn't really working
jQuery(function($){
$("#tabs").tabs({
beforeActivate(event, ui) {
$('#msg').append('<p>'+ui.newPanel+'</p>');
//I figure what I want to do here is catch the ID of the selected tab, and use that to dynamically load content to the tab.
}
});
function fill_input(selector){
if ( selector == 1 ) {
$('#the_input').val(1);
}else if ( selector == 2 ) {
$('#the_input').val(2);
}else{
$('#the_input').val();
}
}
})
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li>New</li>
<li>record 1</li>
<li>record 2</li>
</ul>
<div id="bol_new">
<form>
<input id="the_input">
</form>
</div>
</div>
<div id="msg">
</div>
You could set the href for each hyperlink to bol_new as under
<ul>
<li>New</li>
<li>record 1</li>
<li>record 2</li>
</ul>
This will set the panel for each tab to the same div with id="bol_new"
Test: https://plnkr.co/edit/EGtCnmNr0c28AaT647SP?p=preview
I would advise just mocking up the tabs with CSS. You can then manipulate the form as needed.
Working example: https://jsfiddle.net/Twisty/j63uvk4q/
HTML
<div id="tabs" class="ui-tabs ui-corner-all ui-widget ui-widget-content">
<ul class="ui-tabs-nav ui-corner-all ui-helper-reset ui-helper-clearfix ui-widget-header">
<li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab ui-tabs-active ui-state-active">
New
</li>
<li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab">
Record 1
</li>
<li class="ui-tabs-tab ui-corner-top ui-state-default ui-tab">
Record 2
</li>
</ul>
<div id="bol_new" class="ui-tabs-panel ui-corner-bottom ui-widget-content">
<form>
Record:
<input id="the_input">
</form>
</div>
</div>
<div id="msg">
</div>
JavaScript
var myData = {
records: {
bol_1: "Homer Simpson",
bol_2: "Marge Simpson"
}
}
$(function() {
$("#tabs .ui-tabs-nav li").click(function(e) {
e.preventDefault();
$("#tabs li.ui-state-active").toggleClass("ui-tabs-active ui-state-active");
$(e.target).parent().addClass("ui-tabs-active ui-state-active");
var id = $(e.target).attr("href").substring(1);
$("#the_input").val(myData.records[id]);
});
$("#tabs .ui-tabs-nav .ui-tabs-tab").hover(function(e) {
$(this).toggleClass("ui-state-hover");
}, function(e) {
$(this).toggleClass("ui-state-hover");
});
});
This question already has answers here:
How to disable HTML links
(16 answers)
Closed 6 years ago.
I have a simple bootstrap wizard. I want to disable the next navigation link based on some condition. Can someone please tell me how to do it using jQuery or CSS or any other method.
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li>Item Search</li>
<li>Item Details</li>
<li>Add SPR</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<ul class="pager wizard">
<li class="previous first" style="display: none;">First</li>
<li class="previous">Previous</li>
<li class="next last" style="display: none;">Last</li>
<li class="next">Next</li>
</ul>
</div>
Thanks
the below code should work.
Basically it detects when the tab has changed, then it removes any disabled attribute that might exist. Then depending on the tab clicked there is an if statement that sets if the link can be clicked. After that if a disabled link is clicked, simply do nothing.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href");
$(".wizard a").removeAttr("disabled");
if(target == "#tab3"){
$(".next").attr("disabled","disabled");
}
else if(target == "#tab1"){
$(".previous").attr("disabled","disabled");
}
});
$(".wizard a").on("click", function(event){
if ($(this).is("[disabled]")) {
event.preventDefault();
}
});
Update: Use .prop('disabled',true) instead of .attr('disabled','disabled')
without seeing the rest of your code it's challenging to give an ideal answer for your situation, but you should be able to set a Boolean and check that before allowing the Next button.
You can also apply some CSS to make the button LOOK disabled as well.
var nextOK = true;
$('#mybutt').click(function(){
$('#nextA').prop('disabled',true).css({'color':'red'}); //display:none, or whatever.
nextOK = false;
});
$('#nextA').click(function(e){
if (nextOK) window.location.href = 'http://google.com';
else alert('Button disabled');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li>Item Search
</li>
<li>Item Details
</li>
<li>Add SPR
</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<ul class="pager wizard">
<li class="previous first" style="display: none;">First
</li>
<li class="previous">Previous
</li>
<li class="next last" style="display: none;">Last
</li>
<li class="next"><a id="nextA" href="#">Next</a>
</li>
</ul>
</div>
<button id='mybutt'>Disable Next Button</button>
With javascript in the browser, you need to wait before the Document Object Model has completely loaded before calling some functions that manipulate the HTML.
You can achieve that by adding a simple document.ready function.
You can then add your condition in the function direcly, or any other code manipulating the HTML.
And lastly, by adding an id to the element you want to use, it would make your life much more easier.
Here is a sample of what it could look like:
document.ready = function() {
//Your condition
if(42 >= 1){
//Select the element and make it point to a void
$('#nextLink').attr('href', 'javascript:void(0)');
}
}
Using javascript:void is a really cross browser solution and works of on older versions (like good old IE).
http://jsfiddle.net/Z9zD8/271/
$(function()
{
$('#toggle1').click(function() {
$('.toggle1').toggle();
return false;
});
$('#toggle2').click(function() {
$('.toggle2').toggle();
return false;
});
$('#toggle3').click(function() {
$('.toggle3').toggle();
return false;
});
$('#toggle4').click(function() {
$('.toggle4').toggle();
return false;
});
});
I would like, which is always open just a Slider.
Say: I have Slider 1 open. When I open Slider 2, then close Slider 1
.
It should always be open only a Slider
I hope you can help me
thank you
The boxes [.toggle1, .toggle2, .toggle3, ..] should have one one class like '.toggle', and remove [#toggle1, #toggle2, #toggle3, ..] on link elements, and try this jQuery code:
$(function() {
$('a').on('click', function(e) {
e.preventDefault();
$('.toggle').slideUp();
$(this).next().next().next('.toggle').slideDown();
});
});
Your html code:
Simple Div Toggle<br /><br />
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:100px;"></div>
Simple Div Toggle<br /><br />
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:100px;"></div>
Simple Div Toggle<br /><br />
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:100px;"></div>
Simple Div Toggle<br /><br />
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:100px;"></div>
just use this jquery code:
Fiddle DEMO
$("a[id^='toggle']").click(function(){
$('div[class^="toggle"]').slideUp(500);
$("."+$(this).attr("id")).slideToggle(500);
});
Have you looked at the Jquery UI accordion
Accordian
I think you want this behaviour
You might want something like so:
enter link description here
$(function () {
$(".flyout").siblings("span").click(function () {
$(".flyout").slideUp(200, function() {
$(this).siblings(".flyout").toggle(500);
});
$(this).siblings(".flyout").toggle(500);
});
});
<ul>
<li ><span id="europe">Europe</span>
<div class="flyout">
<ul>
<li>item 1</li>
</ul>
</div>
</li>
<li ><span id="europe">Asia</span>
<div class="flyout">
<ul>
<li>item 1</li>
</ul>
</div>
</li>
</ul>
.flyout {display: none}