How to make website menu tabs (one page with other pages)

I would like to make a site with one page, which is inside the other pages.

To go from one page to another, there is a tab or a similar menu, so the page does not change, but only the internal content. The inner content has a lot of jquery and php: one has a form to perform a search on the left, and the results are shown in the center with the data, 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 (for example: you do a search, and then go to another page / internal content, when you return to the search results, should still be there). On one of the tabs there is a list (submenu). When you select something from this list, each page should know and use this selected value.

I thought I could do all this with a lot of ajax, jquery ui tabs and php.

My questions: is it good to do something like this? Is there any other way to achieve what I want? Would it be better to make a regular menu with a large number of pages (no more internal content, but different pages) and save the selected value in the session? In this case, how to save the results? (Session again?)

I hope this issue is resolved. Thanks everyone!

EDIT: I am not asking for code (I know how jquery tabs are and I searched google). I ask, is it good practice to do something like this (one page with more content) or is it better to use more pages?

EDIT 2 . I will stop my question. I should do something like this: 10 pages with different content that have php, jquery inside with a menu to go from one page to another. When you go from one page to another, the search and options selected on the remaining pages should still be there, so that when you return, you can see them. One menu has a submenu with a list. When you select something from this list, the selected value changes things by half the pages (what you see inside). How can I do it? (Don't show me the code, just tell me what I should use for this)

EDIT3 . I looked online and yahoo mail is what I want. The top of the page is always the same. Then you have a menu: inbox, contacts, calendar. When you click on contacts, only part of the page changes (my internal content, as I called it), and this happens when you click on other voices in the menu. Inside the contacts, if you click on one contact, you can see the details about this contact, then if you click on the Inbox and again on the contacts, you will still see the contact you selected earlier. How can I achieve this?

+4
source share
2 answers

You can simply achieve this using the jquery tab plugin tab.

or you must create your own website template in which you replace the content through an 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 suggest you just display the content based on the choice of tabs, than look for Ui-tabs

If you are developing a complex website. and you need some menus. than try jquery popup menu. To display the contents, rewrite the contents of the div based on the tab selection using ajax, as I mentioned in my example.

Here is a link to the jquery dropdown

http://codecanyon.net/item/jquery-css3-dropdown-menu-plugin/996815?ref=jared501

Living example

+2
source

HTML is a structure and some simple data explanations. If you want to make some data, you should use something like PHP, ASP ...

If you want to have nice effect pages, use JavaScript and share these languages. But you have no exact question, so the answer is general

0
source

Source: https://habr.com/ru/post/1479501/


All Articles