New here and not the most experienced with Javascript but I’m learning. First I would like to ask your recommendations on the best place to start learning javascript, so that I may learn quicker and not have to continue posting on here getting assistance… Thank you in advance.
I believe my javascript issue is fairly simple. The selector itself works great and as expected however I can’t link directly to each div section.
I have a tab selector in JS that changes the “display” class of whichever div the link points to however it doesn’t change the URL. I need to add a bit of code onto this that adds a #tab1 or #tab3 onto the end of the URL so that these div’s can be linked to directly. I’ll include both the JS and HTML so you can see how its applied. I did not write this JS or I’d have a better idea how it works so forgive my ignorance on how exactly this bit of code works. Any help is much appreciated, I would be willing to try other methods if anyone knows an easier way to achieve this.
Thanks so much in advance! All your help is really appreciated. As I said, learning now and gotta start somewhere! Happy Holidays. All the best -
Heres the code:
$(function(){
function tabselector(){
var s_cookie = $.cookie("tabselector");
var s_active = '';
var s_ni = '';
jQuery('.tab_content').hide();
if(!s_cookie){
jQuery(".tabs li:first").addClass("active");
jQuery(".tab_content:first").css('display', 'block');
} else if (s_cookie != "") {
jQuery('.tabs li:eq('+ s_cookie +')').addClass('active').next().show();
s_active = jQuery('.tabs li:eq('+ s_cookie +')').find('a').attr("href");
jQuery(s_active).fadeIn(500);
}
jQuery(".tabs li").click(function() {
jQuery(".tabs li").removeClass("active");
jQuery(this).addClass("active");
s_ni = jQuery('.tabs li').index(this);
$.cookie("tabselector", s_ni);
jQuery('.tab_content').hide();
s_active = jQuery(this).find('a').attr("href");
jQuery(s_active).fadeIn(500);
return false;
});
}
$('#tabs > li').each(function(){
return tabselector();
});
});
<ul id="tabs">
<li><a href="#tab1">Story Idea</a></li>
<li><a href="#tab3">Event</a></li>
<li><a href="#tab4">Letter to the Editor</a></li>
<li><a href="#tab6">Sports Score</a></li>
<li><a href="#tab7">Contact Us</a></li>
</ul>
<div id="tabs_content_container">
<div id="tab1" class="tab_content" name="tab1" style="display: block;">
<h3>Submit your story idea below</h3>
[contact-form-7 id="34" title="Story Idea"]
</div>
<div id="tab3" name="tab3" class="tab_content">
<h3>Submit your Event below</h3>
[contact-form-7 id="44" title="Event"]
</div>
<div id="tab4" class="tab_content">
<h3>Submit your letter to the editor below</h3>
[contact-form-7 id="48" title="Letter to the Editor"]
</div>
<div id="tab6" class="tab_content">
<h3>Submit your Sports Score below</h3>
[contact-form-7 id="50" title="Sports Score"]
</div>
<div id="tab7" class="tab_content">
<h3>Submit your contact below</h3>
[contact-form-7 id="52" title="Contact Us"]
</div>
</div>
Where you find s_active for the link, that is a good place to update the location hash with something like this:
location.hash = s_active.href.substring(1);
Which given that the href is ‘#tab1’, will take the substring starting from position 1 onwards, resulting in ‘tab1’ being assigned as the hash.
01234 #tab1
Then when the page loads, you can check location.hash and if it contains anything you can search for the tab link that contains that value, and trigger a click event on that tab which could be something that looks like this:
if (location.hash) {
$('[href="' + location.hash + '"]').trigger('click');
}
That solution worked great. I really appreciate the help.
Turns out I had a a different bit of JS controlling this part of the site than what I posted. I included what you gave me into that and have it working when I link directly to one of these sections from an outside page.
However, when I’m currently on the page, these links with the #tab1 or #tab2 href’s aren’t activating the DIV’s. Its not a huge deal because theres other links on the same page that work fine but I think the solution would be to have a setInterval and a If statement on that last function you wrote to trigger the click. That way it could check if the url is different than run this function every second to change the DIV accordingly. What do you think?
I’ll include what I have so far. Thanks again -
$(document).ready(function(){
// When user clicks on tab, this code will be executed
$("#tabs li").click(function() {
// First remove class "active" from currently active tab
$("#tabs li").removeClass('active');
// Now add class "active" to the selected/clicked tab
$(this).addClass("active");
// Hide all tab content
$(".tab_content").hide();
// Here we get the href value of the selected tab
var selected_tab = $(this).find("a").attr("href");
// Show the selected tab content
$(selected_tab).fadeIn();
location.hash = s_active.href.substring(1);
// At the end, we add return false so that the click on the link is not executed
return false;
});
});
$(document).ready(function(){
// When user clicks on tab, this code will be executed
$("#tabs1 li").click(function() {
// First remove class "active" from currently active tab
$("#tabs1 li").removeClass('active');
// Now add class "active" to the selected/clicked tab
$(this).addClass("active");
// Hide all tab content
$(".tab_content1").hide();
// Here we get the href value of the selected tab
var selected_tab = $(this).find("a").attr("href");
// Show the selected tab content
$(selected_tab).fadeIn();
location.hash = s_active.href.substring(1);
// At the end, we add return false so that the click on the link is not executed
return false;
});
});
$(document).ready(function(){
// When user clicks on tab, this code will be executed
$("#tabs2 li").click(function() {
// First remove class "active" from currently active tab
$("#tabs2 li").removeClass('active');
// Now add class "active" to the selected/clicked tab
$(this).addClass("active");
// Hide all tab content
$(".tab_content2").hide();
// Here we get the href value of the selected tab
var selected_tab = $(this).find("a").attr("href");
// Show the selected tab content
$(selected_tab).fadeIn();
location.hash = s_active.href.substring(1);
// At the end, we add return false so that the click on the link is not executed
return false;
});
});
$(document).ready(function(){
// When user clicks on tab, this code will be executed
$("#tabs3 li").click(function() {
// First remove class "active" from currently active tab
$("#tabs3 li").removeClass('active');
// Now add class "active" to the selected/clicked tab
$(this).addClass("active");
// Hide all tab content
$(".tab_content3").hide();
// Here we get the href value of the selected tab
var selected_tab = $(this).find("a").attr("href");
// Show the selected tab content
$(selected_tab).fadeIn();
location.hash = s_active.href.substring(1);
// At the end, we add return false so that the click on the link is not executed
return false;
});
});
$(document).ready(function(){
// When user clicks on tab, this code will be executed
$("#tabs4 li").click(function() {
// First remove class "active" from currently active tab
$("#tabs4 li").removeClass('active');
// Now add class "active" to the selected/clicked tab
$(this).addClass("active");
// Hide all tab content
$(".tab_content4").hide();
// Here we get the href value of the selected tab
var selected_tab = $(this).find("a").attr("href");
// Show the selected tab content
$(selected_tab).fadeIn();
location.hash = s_active.href.substring(1);
// At the end, we add return false so that the click on the link is not executed
return false;
});
});
$(function(){
if (location.hash) {
$('[href="' + location.hash + '"]').trigger('click');
}
});
I see that you’re using selected_tab instead of s_active. Reconcile those differences so that selected_tab is being used consistently throughout instead of s_active, and you should be right.
Hey Paul - Thanks again for the reply. Got the s_active switched out, I should have caught that.
Any chance you could help me with that If statement for the trigger click function.
If the url is different than run this function every second to change the DIV accordingly. I have no experience writing something like this but could learn a lot seeing how you attempt it.
I’m looking at your tabs in a test page, and whenever the link is clicked the url changes and the page updates, and when that updated link is visited you seem to get the correct content showing on the page.
So I’m wondering - what problem are you attempting to fix?