4

I'm new to building website, so I'm sorry if this is a stupid question. I'm trying to build a page whereby i have two links which refer to the same page (Login and Signup):

<li><a href="login.php">Login</a></li>
<li><a href="login.php" class="button special">Sign Up</a></li>

The login.php page has a tabbed form (similar to this https://www.hackerrank.com/signup) and I would like a particular tab to be the current one, depending on the link clicked (signup or login).

Is this possible? How?

Thanks!

Rajaprabhu Aravindasamy
  • 66,513
  • 17
  • 101
  • 130
beginnerHacker
  • 51
  • 4

1 Answers1

2

In the page you linked, the url changes depending on which tab is selected, whereas you seem to want a dynamic behaviour out of a unique page.

I would add an id to the tabs first [this is a piece of code of the page you linked]:

<ul class="login_tab unstyled horizontal clearfix">
    <li class="signup-toggle toggle" id="signup"><a href="/signup" data-toggle="tab">Sign Up</a></li>
    <li class="login-toggle toggle" id="login"><a href="/login" data-toggle="tab">Log In</a></li>
</ul>

Notice that I also removed 'active' from both 'li' items.

Then I would change your links to be like:

<li><a href="login.php#login">Login</a></li>
<li><a href="login.php#signup" class="button special">Sign Up</a></li>

and then write the following post-loading function for your page

$(function() {
  var url = location.pathname.hash; // gets #par_name
  var par = url.slice(1); // gets 'par_name'
  var d = document.getelementById(par); // gets element with id #par_name
  d.className += " active"; // makes the element active
});

I didn't test the code on an actual page, but I hope you got the idea.

edit: simplified code as per @dev-null suggestion

Patrick Trentin
  • 7,126
  • 3
  • 23
  • 40
  • 1
    You should usually use [`.slice(...)` instead of `.substring(...)`](https://stackoverflow.com/questions/2243824/what-is-the-difference-between-string-slice-and-string-substring) and since the hash will always start with `#` you can use `url.slice(1)`. – Andreas Louv Mar 15 '16 at 21:52