?
Solved

JavaScript & CSS Tab issue on PHP site

Posted on 2013-06-12
5
Medium Priority
?
474 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
  • 3
  • 2
5 Comments
 
LVL 62

Assisted Solution

by:Julian Hansen
Julian Hansen earned 400 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 62

Assisted Solution

by:Julian Hansen
Julian Hansen earned 400 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

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?
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
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…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

589 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