how to call or display a div by changing url using href?

Question

i am trying to show a div which is currently hide and inside body tag.by changing url using anchor tag attribute href.Like below---

<a id="ai" href="managevendors" class="tablink" onclick="openCity()">Manage Vendors
</a>
<div class="w3-container city" style="display: none;" id="managevendors">
<h1>hi,how are you</h1>
</div>

when i click on this anchor tag my url will definitely changed.and based on url i wants to display a div. my js code...

function openCity() {
    if (window.location.hash == "managevendors") {
    $("#managevendors").show();
    }
}

i dont know why this is not working.but i teide with different way like below..

<a id="ai" href="#managevendors" class="tablink" onclick="openCity('managevendors')">Manage Vendors
</a>

and js code.....

function openCity()
{
  if (window.location.hash == "#managevendors") {
    $("#managevendors").show();
    }
}

but i dont want the # sing,how can i solve it.help me experience brothers.thanks in advance.

Answer 1

You must use the hash if you expect the navigation to work. Once you do that, you don't need to check for it, you can just show the section:

 $("#ai").on("click", openCity); function openCity() { // The only reason this code is running is because the link was clicked. // No need to test for it. $("#managevendors").show(); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- You have to include the hash in the href for navigation to work --> <a id="ai" href="#managevendors" class="tablink">Manage Vendors </a> <div class="w3-container city" style="display: none;" id="managevendors"> <h1>hi,how are you</h1> </div> 

Answer 2

I think the problem here is that you are using an anchor tag when you should be using a button. The reason the first way is not working is due to the page refreshing when you click the link.

Try changing your <a> to a <button>

Answer 3

From what I understand, you most likely need the href="#xyz" with a hash. This will keep clientside logic active without trying to solve the url and take a detour to the server for nothing. If you're going to capture that part, keep it local.

I suggest to remove the onclick handler from HTML. To capture the link you can use jQuery to keep your HTML "clean". If you must, for some odd reason, by all means you can reference onclick="openCity(this)" , so the element you click on is passed directly to openCity .

// vanilla
function openCity(element){
    var href = element.getAttribute('href'), // expecting a hash here
        id = href.substr(1), // remove the hash
        target = document.getElementById(id);

    target.className += " active";
    return false;
}

As Scott suggests with jQuery:

//$('.tablink').on('click', openCity);
$('.tablink[href^="#"]').on('click', openCity);

Then the function can be made dynamic by referencing the href from the clicked element:

function openCity(ev){
    var el = $(ev.currentTarget),
        id = el.prop('href'), // expecting a hash here
        target = $(id);

    // since you're providing both with and without hash, the default behaviour is to follow the link, unless referenced with a hash
    ev.preventDefault();
    target.addClass('active');
}

If the id was not found on the page, this will void silently.

---

Now if you want to work with the url as entry point, note that this will only happen on load event => share a link and someone clicks on it (with the #xyz attached) or type directly in the address bar.

// 1. bind the event
$(window).load(function(){
    /*loadCity defined here or outside*/

    loadCity();
});

// 2. define what happens
function loadCity(){
    var id = window.location.hash, // expecting a hash here
        target = $(id);

    target.addClass('active');
}

---

Since this solution only solves state of an element, the actual show/hide part can be made in CSS. Very simple as you probably already did or with animations, transitions and so on.

.city { display: none; }
.city.active { display: block; }