How to make a tab menu website (one page with inside other pages)
Question
I would like to make a website with one page that has inside other pages.
To go from one page to another there's a tab or similar menu, so the page doesn't change, only the inner content. The inner content has a lot of jquery and php: one has a form to make a search on the left and the results are shown in the center with datatables, so you can search inside the results, order them, etc, etc. When you switch from one content to another I don't want the content to be reset ( example: you make a search and then you go to another page/inner content , when you come back the results of the search have to be still there). One of the tabs has a list( a submenu). When you select something from that list every page has to know and to use that selected value.
I thought the I can make all this with a lot of ajax, jquery ui tabs and php.
My questions are: it's good to make something like that? Is there another way to achieve what I want? Would it be better to make a normal menu with a lot of pages( no more inner content, but diffrent pages) and keep the selected value in session?In this case how can I keep the results?(session again?)
I hope that this question is allowed. Thank you all!
EDIT: I'm not asking the code( I know how jquery tabs and I searched google). I'm asking if it's a good practice to make something like that( one page with a lot of content) or it's better to use more pages?
EDIT 2 : I'll refrase my question. I have to make something like this: 10 pages with different content that have php, jquery inside with a menu to navigate from one page to another. When you go from one page to another the searches and options selected in the pages that you left have to be still there, so that when you go back you can see them. One menu has a submenu with a list. When you select something from that list the selected value changes things in half of the pages(what you see inside). How should I do this?(don't show me code, tell me only what should I use to accomplish this)
EDIT3 : I looked online and yahoo mail has what I want. The top of the page is allways the same. Then you have a menu: inbox, contacts, calendar. When you click on contacts only part of the page changes ( my inner content as I called it) and the same happens when you click on the other voices in the menu. Inside contacts, if you click on one contact you can see details about that contact, then if you click on inbox and again contacts you can still see the contact that you selected before. How can I achieve this?
2 answers
solution1
2 ACCPTED 2013-05-07 09:17:45
You can simple achieve this by using jquery Tab plugin .
or you should create your website template in which you replace content through ajax call.
<html>
....
<body>
<div class="tab_container">
<ul>
<li> Tab 1</li>
<li> Tab 2</li>
</ul>
<!-- integrate nested menu here -->
</div>
<div id="content">
onclick on tab selection display appropriate content here
</div>
</body>
</html>
I would suggest you if simply display content on the basis of tab selection than go for Ui-tabs
If you are developing complex website. and you need multiple menu. than try jquery dropdown menu. For displaying content, overwrite content div on the basis of tab selection using ajax as I have mention in my example.
Here is link for jquery drop-down menu
http://codecanyon.net/item/jquery-css3-dropdown-menu-plugin/996815?ref=jared501
solution2
0 2013-05-07 09:22:36
HTML is for structure and some simple data explanation. If you want to make some data you should use something like PHP, ASP...
If you want to have some nice pages with effects use JavaScript and common this languages. But you don't have exact question so the answer is the common
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.