Link href to jquery hidden tab on another page

JavaScript
,
1

Hi,
Link: http://ankiita.com/nicoger/coger-institute.html
I need to link Business management under training fields table on Coger Institute page to Business Management (id=“#business_mang”) tab of IT & Business Management Training page.
Can anyone really help?

I have tried : <a href="it-business-management-training.html?#business_mang">Business Management</a>
but it didn’t work may be because the tab is hidden using jQuery hide & show on IT & Business Management Training page for it’s own page requirements.

Thanks in advance.

2

Try removing the ? after the .html in the link.

3

After it-business-management-training.html has loaded you’ll need to get the tab from window.location.hash and call the same function that is running when you click the menu.

I’ll rework some of this in a follow up post - any time you repeat yourself like there’s always a better way.

$('#overview-it').click(function(){
	$('#overview_it').show();
	$('#data_sec, #app_dev, #net_work, #business_mang, #mark_ting, #enter_preneur, #fin_ance, #proj_mang, #arabic, #french, #port').hide();		
	
});

$('#data-sec').click(function(){
	$('#data_sec').show();
	$('#overview_it, #app_dev, #net_work, #business_mang, #mark_ting, #enter_preneur, #fin_ance, #proj_mang').hide();
	
});

$('#app-dev').click(function(){
	$('#app_dev').show();
	$('#overview_it, #data_sec, #net_work, #business_mang, #mark_ting, #enter_preneur, #fin_ance, #proj_mang').hide();
	
});

$('#net-work').click(function(){
	$('#net_work').show();
	$('#overview_it, #data_sec, #app_dev, #business_mang, #mark_ting, #enter_preneur, #fin_ance, #proj_mang').hide();	
	
});

$('#business-mang').click(function(){
	$('#business_mang').show();
	$('#overview_it, #data_sec, #app_dev, #net_work, #mark_ting, #enter_preneur, #fin_ance, #proj_mang').hide();	
});

$('#mark-ting').click(function(){
	$('#mark_ting').show();
	$('#overview_it, #data_sec, #app_dev, #business_mang, #net_work, #enter_preneur, #fin_ance, #proj_mang').hide();		
});

$('#enter-preneur').click(function(){
	$('#enter_preneur').show();
	$('#overview_it, #data_sec, #app_dev, #business_mang, #mark_ting, #net_work, #fin_ance, #proj_mang').hide();		
});

$('#fin-ance').click(function(){
	$('#fin_ance').show();
	$('#overview_it, #data_sec, #app_dev, #business_mang, #mark_ting, #enter_preneur, #net_work, #proj_mang').hide();		
});

$('#proj-mang').click(function(){
	$('#proj_mang').show();
	$('#overview_it, #data_sec, #app_dev, #business_mang, #mark_ting, #enter_preneur, #fin_ance, #net_work').hide();		
});

--

$('#overview-it-it').click(function(){
	$('#overview_it').show();
	$('#data_sec, #app_dev, #net_work, #business_mang, #mark_ting, #enter_preneur, #fin_ance, #proj_mang, #arabic, #french, #port').hide();		
	
});

$('#data-sec-it').click(function(){
	$('#data_sec').show();
	$('#overview_it, #app_dev, #net_work, #business_mang, #mark_ting, #enter_preneur, #fin_ance, #proj_mang').hide();
	
});

$('#app-dev-it').click(function(){
	$('#app_dev').show();
	$('#overview_it, #data_sec, #net_work, #business_mang, #mark_ting, #enter_preneur, #fin_ance, #proj_mang').hide();
	
});

$('#net-work-it').click(function(){
	$('#net_work').show();
	$('#overview_it, #data_sec, #app_dev, #business_mang, #mark_ting, #enter_preneur, #fin_ance, #proj_mang').hide();	
	
});

$('#business-mang-it').click(function(){
	$('#business_mang').show();
	$('#overview_it, #data_sec, #app_dev, #net_work, #mark_ting, #enter_preneur, #fin_ance, #proj_mang').hide();	
	
});

$('#mark-ting-it').click(function(){
	$('#mark_ting').show();
	$('#overview_it, #data_sec, #app_dev, #business_mang, #net_work, #enter_preneur, #fin_ance, #proj_mang').hide();		
	
});

$('#enter-preneur-it').click(function(){
	$('#enter_preneur').show();
	$('#overview_it, #data_sec, #app_dev, #business_mang, #mark_ting, #net_work, #fin_ance, #proj_mang').hide();		
	
});

$('#fin-ance-it').click(function(){
	$('#fin_ance').show();
	$('#overview_it, #data_sec, #app_dev, #business_mang, #mark_ting, #enter_preneur, #net_work, #proj_mang').hide();		
	
});

$('#proj-mang-it').click(function(){
	$('#proj_mang').show();
	$('#overview_it, #data_sec, #app_dev, #business_mang, #mark_ting, #enter_preneur, #fin_ance, #net_work').hide();		
	
});
4

First things first, you can’t use an id more than once so change the links that change the content from an id to a class.

By giving every section that you hide/show a common class you can replace all of the functions I pasted above with one:

var showTab = function(selector) {
  $('.tab').hide()
  $(selector).show();
}

Similarly you can replace all of the duplicated click handlers with one if they all follow the same pattern.

$('.links a').click(function(event) {
  var $el = $(event.target).closest('a')
  var id = $el.attr('id')
  showTab('#' + id)
})

Then the load function to initialize the page from the hash fragment looks something like this

$(function() {
  var selector = window.location.hash
  if (selector) {
    showTab(selector)
  }
})
6

Hey @markbrown4,
Thank you so much for your time.
I agree we can’t use an id more than once.
But if I change to a common class the conditions to be used on IT & Business Management Training page will not work. So the code is showing hide and show conditions to display it’s own tabs respectively.
Here, I need to show one of these hidden tabs say BUSINESS MANAGEMENT via Coger Institute page.

Can you do something?

Thanks.

7

@WebMachine doesn’t help. Thanks though.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.