Click here to Skip to main content
15,923,015 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
i have developed a simple web page which includes three tabs
and it contains
Register, Login, Chat respectively.
the problem is
when i code for chat tab and open index page in the browser.
it will view register and login page, both at once.
how can i separate each coding for each tab.

What I have tried:

Quote:
Form Begins

Three Tabs

Tab Content - This will separate each tabs

Tab Content - Sign Up Form

Hemas Customer Registration


<form action="db2.php" method="post">

<label>
Full Name*
</label>
<input type="text" name="name" required autocomplete="off" />


<label>
Contact No*
</label>
<input type="text" name="contact" required autocomplete="off" />


<label>
Email Address*
</label>
<input type="email" name="email" required autocomplete="off"/>


<label>
Message*
</label>
<input type="text" rows="5" name="pass" required autocomplete="off"/>


<button type="submit" class="button button-block" name="submit" value="signup" />Submit</button>

</form>


Login Form- This will separate each tabs

Welcome Back!


<form action="/" method="post">


<label>
Email Address*
</label>
<input type="email"required autocomplete="off"/>



<label>
Password*
</label>
<input type="password"required autocomplete="off"/>


Forgot Password?



<button class="button button-block"/>Log In</button>

</form>



Chat Form- This will separate each tabs

Welcome To Chat!



if i remove these chat tab codes it will show the website perfectly
<!-- tab-content -->

<!-- /form -->

this is what i got if someone not clear with this. they can get an idea by copying this to their notepad or any html ide..
Posted
Updated 21-Oct-16 3:09am
v2
Comments
Suvendu Shekhar Giri 21-Oct-16 4:26am    
Check following example to see how to create a simple tab-
How To Create Tabs[^]

1 solution

You have to remember that the tabs are, effectively, an illusion. One one to create tabs is to have several <div> elements - all the same size and all located one-atop-another. Each of these div elements contains markup for whatever you want.

Now - set the z-index style for each to 1, except for the one you wish on top when the page is first rendered, which you can set to 2.

Now - each tab (which are themselves <div> elements strung across the top above the tab-content areas, each have an onclick method. They all go to the same function. Each sends its 'id' as the function argument.

Now - when clicked - all the tabs should have their z-index reset to 1 and then set the index of the clicked tab to 2. (Use DOM to set the style).

It's also nice to modify the appearance of the tabs, themselves, in this function so that the clicked tab is identified as the user would expect.

There are other ways to do this, but this is pretty simple.
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900