Solved

JavaScript & CSS Tab issue on PHP site

Posted on 2013-06-12
5
452 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 54

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 54

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

813 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now