I have a header page that is accessed by another page. On the header page, I have a bell icon, on clicking the bell icon, it should go to a tab on another page. How to achieve this.
Header page code:
<div class="notify id="notify">
<a href="/myAccount#message" class="not-bell"><i class="fa fa-bell"></i></a>
</div>
My account page contains certain tabs
<div class="nav-tabs-custom profile_tab" id="tabs">
<ul class="nav nav-tabs">
<li class="active"><a href="#profile" data-toggle="tab" class="active show">Profile</a></li>
<li><a href="#pass" data-toggle="tab">Password</a></li>
<li><a href="/list" data-toggle="tab">My Listings</a></li>
<li><a href="#message" data-toggle="tab" id="msg" >Message</a></li>
</ul>
<div class="tab-content">
<div class="active tab-pane" id="profile">
---
</div>
<div class="tab-pane" id="pass">
---
</div>
<div class="tab-pane" id="message">
---
</div>
</div>
On clicking the bell icon , path should be message tab of my account page. But the path shows the profile tab.
What my output shows on clicking the bell icon is
How to move to message tab, when click on bell icon .
As you can see from my code below i add data-contentabs and data-ultabs then i use window.location.hash (into this example i used simple variable because we are in iframe) and use this value for check if exist a div with that value and add active class into that.
const hash = 'message'; // In your live version ---> window.location.hash;
if (hash) {
let div = document.querySelector('[href*="' + hash + '"]');
let div2 = document.querySelector('#' + hash);
if (div === null || div2 === null) {
FirstHash();
} else {
div.classList.add('active');
div2.classList.add('show');
div2.classList.add('active');
}
} else {
FirstHash();
}
function FirstHash() {
let div = document.querySelector('ul[data-ultabs] > li:first-child > a');
let div2 = document.querySelector('div[data-contentabs] > div:first-child');
if (div) {
div.classList.add('active');
}
if (div2) {
div2.classList.add('show');
div2.classList.add('active');
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>
<div class="nav-tabs-custom profile_tab" id="tabs">
<ul class="nav nav-tabs" data-ultabs>
<li><a href="#profile" data-toggle="tab" class="active show">Profile</a></li>
<li><a href="#pass" data-toggle="tab">Password</a></li>
<li><a href="/list" data-toggle="tab">My Listings</a></li>
<li><a href="#message" data-toggle="tab" id="msg">Message</a></li>
</ul>
<div class="tab-content" data-contentabs>
<div class="tab-pane" id="profile">
<p>SECTION PROFILE</p>
</div>
<div class="tab-pane" id="pass">
<p>SECTION PASS</p>
</div>
<div class="tab-pane" id="message">
<p>SECTION MESSAGE</p>
</div>
</div>
</div>If you edit the value of hash with empty or wrong value, you will see the script will active the first tab.
Ps. Clearly this is a basic code, i suggest you to edit and change name of variable and put all into a function