Tab page to be pass as a link using php or jquery

Question

I'm still a student in progressing my project, I kinda seem lost with a tab page. I would like to ask is there any solution on how do I pass a tab as a link so it enables me to reload the certain tab I'm on without it have to redirect to very first tab? Appreciate your help

Here's a reference.

                    <ul class="nav nav-tabs" data-tabs="tabs">
                        <li class="nav-item">
                            <a class="nav-link active" href="#fishInfo" data-toggle="tab">Fish Information</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#addFish" data-toggle="tab">Add New Fish</a>
                        </li>
                    </ul>

The link when I hover the tab:

But it doesn't appear the same at the browser link:

Thank you so much.

This is not PHP, this is basic HTML. What navigator are you using? Because I tried this in Chrome and Firefox and the URL updates without a problem. — prueba prueba, Mar 03 '21 at 06:17
@pruebaprueba I'm using Chrome. I don't know how to explain further. Basically I have 2 different tab which each of those tabs will display different information. I would like to know any solution using php or jquery on how do I use the tab as a link that enables the tab I currently on, to reload for only that tab. Because right now, if I visit the #addFish tab and I reload the tab, it would go to the active tab which is '#fishInfo'. Do I have to set the tabs with an id or so. Tq — carrotgal, Mar 03 '21 at 06:31
Sounds like maybe you should use Ajax to reload the tab content maybe. Either than or store the currently selected tab in localstorage and then use that to make it show the relevant one after a reload has occurred — ADyson, Mar 03 '21 at 07:32
This looks like you are using Bootstrap? Do a bit of research then, please - how to handle this, has been discussed before, https://stackoverflow.com/q/7862233 would be one example. (That question is from 2011 already, but surely you will be able to find newer ones as well, such as f.e. https://stackoverflow.com/questions/43068221/bootstrap-4-link-to-specific-tab) — CBroe, Mar 03 '21 at 08:31
@ADyson alright noted, thank you for the suggestion. Much appreciated :) — carrotgal, Mar 04 '21 at 12:14
@CBroe Yes i'm using Bootstrap and still learning to understand it further, thank you for the suggestion. Will look through it in depth. Thank you and much appreciate for your respond! — carrotgal, Mar 04 '21 at 12:15

score 0 · Answer 1 · answered Mar 03 '21 at 17:11

According to your comment this is a JavaScript solution.

Create the tabs with their information as you normally do (with PHP or HTML, that doesn't matter) but...

To each tab assign their id attribute (I recommend to using the name of the sections for easy use) and...

Using CSS set the tabs (not the nav-tab) property 'display' as 'none' .

At the bottom of the HTML (or using the onload event), using JavaScript (no need for jQuery), show the tab depending what section is in the URL.

Here I give you an example of the code completely:

function display(name) {
  document.getElementById('UserInfo').style.display = 'none';
  document.getElementById('AddUser').style.display = 'none';
  document.getElementById('UserActivity').style.display = 'none';
  document.getElementById(name).style.display = 'block';
}

.tab {
  display: none;
}

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
    <body>
        <ul>
            <li class="nav-item">
                <a class="nav-link active" href="#UserInfo" data-toggle="tab" onclick="javascript:display('UserInfo');">Users Information</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#AddUser" data-toggle="tab" onclick="javascript:display('AddUser');">Add New User</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#UserActivity" data-toggle="tab" onclick="javascript:display('UserActivity');">View Activity</a>
            </li>
        </ul>
        <div id="UserInfo" class="tab">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer feugiat scelerisque varius morbi enim nunc faucibus. Tempor nec feugiat nisl pretium fusce id velit ut. Fusce id velit ut tortor. Facilisis leo vel fringilla est. Donec enim diam vulputate ut pharetra sit amet. Cras sed felis eget velit aliquet sagittis. Et netus et malesuada fames ac turpis egestas. Ultrices in iaculis nunc sed augue lacus. Neque sodales ut etiam sit amet nisl purus in mollis. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tristique magna sit amet purus gravida quis blandit turpis. Viverra justo nec ultrices dui sapien eget.
        </div>
        <div id="AddUser" class="tab">
            Mi quis hendrerit dolor magna eget est. Morbi tincidunt ornare massa eget. Vitae congue eu consequat ac felis donec et odio pellentesque. Sed risus pretium quam vulputate dignissim. Tincidunt dui ut ornare lectus sit amet est placerat in. Tortor posuere ac ut consequat semper viverra nam libero justo. Ac tortor vitae purus faucibus. Laoreet sit amet cursus sit amet. Ut eu sem integer vitae justo. Congue quisque egestas diam in. Tellus pellentesque eu tincidunt tortor aliquam. Cursus turpis massa tincidunt dui ut. Id volutpat lacus laoreet non curabitur gravida arcu ac tortor. Fringilla urna porttitor rhoncus dolor purus non enim praesent. Viverra suspendisse potenti nullam ac tortor vitae purus. Mollis nunc sed id semper risus.
        </div>
        <div id="UserActivity" class="tab">
            Euismod quis viverra nibh cras pulvinar mattis. Lacus sed viverra tellus in. Pharetra sit amet aliquam id diam maecenas. Habitant morbi tristique senectus et netus et malesuada fames. Vitae semper quis lectus nulla. Et malesuada fames ac turpis egestas sed. Nulla aliquet enim tortor at. Turpis nunc eget lorem dolor sed. Pellentesque nec nam aliquam sem et tortor consequat. Adipiscing elit pellentesque habitant morbi tristique senectus et netus. Nunc mi ipsum faucibus vitae aliquet.
        </div>
        <script>
            var hash = document.URL.substr(document.URL.indexOf('#')+1);
            display(hash);
        </script>
    </body>
</html>

Tab page to be pass as a link using php or jquery

1 Answers1