Solved

JavaScript & CSS Tab issue on PHP site

Posted on 2013-06-12
5
465 Views
Last Modified: 2013-06-18
Hello,

I am implementing the following CSS tab system:

http://www.my-html-codes.com/javascript-tabs-html-5-css3

However, I would like to use a URL variable to change the tab that should be displayed on page reload.

i.e. http://www.testsite.com/?tab=2

Would default to the 2nd tab being open rather than the first.

The site is running with PHP as well, though I would prefer a pure JavaScript option (and my skills are really rusty).

I have tried to get in touch with the Author but they are not responding.

Thanks in advance.
0
Comment
Question by:stirlingit
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 58

Assisted Solution

by:Julian Hansen
Julian Hansen earned 100 total points
ID: 39240575
You should be able to just put the <a> inside the <li> elements and then add onclick="return false;" to the link.

The event should bubble up and the tabs should behave as expected but on the outside it looks like you are clicking the link.
0
 

Author Comment

by:stirlingit
ID: 39240863
That sounds like a possible solution but if the tabs are only on a single page, say three forms that on single page (forms.php) then how would that work?

As ideally, I would like to use form.php?tab=3 if the user then submits form three.
0
 
LVL 58

Assisted Solution

by:Julian Hansen
Julian Hansen earned 100 total points
ID: 39241114
When you submit a form the button submits to the url of the parent form.
0
 

Accepted Solution

by:
stirlingit earned 0 total points
ID: 39243856
Hmm, thanks for you help but I managed to tap a friend to re-write the JS directly.
d-tabs.js
0
 

Author Closing Comment

by:stirlingit
ID: 39255579
Managed to get a friend to re-write the main code that meant that I only needed to add URL hash tags rather that adding additional script to the main page.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This article discusses how to implement server side field validation and display customized error messages to the client.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Suggested Courses

626 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question