CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Korey
Korey

Reputation: 31

How to load HTML into a single div using tabs

I had script setup to toggle show/hide divs on a page with menu items.

However I wanted to load external HTML into one of them and was running into issues.

Now I am wanting to just having the menu items load external HTML into a single div.

I can't seem to make it work though and I want to have a menu like this:

<div id="topmenu">
<a href="#" >Home</a>
<a href="#" >Videos</a>
<a href="#" >Follow</a>
<a href="#" >Contact</a>
</div>

Each item loads a different HTML into a div like this using jQuery:

<article>
<div id="bodycontent">
...
</div>
</article>

Upvotes: 1

Views: 312

Answers (1)

Rupesh Arora
Rupesh Arora

Reputation: 577

If you want to add or means to say load external html then you need to add some java scrip.Let take your example.

    <div id="topmenu">
<a href="#" id='homeTab'>Home</a>
<a href="#" id='videoTab'>Videos</a>
<a href="#" id='followTab'>Follow</a>
<a href="#" id='contactTab'>Contact</a>
</div>

See I've added individual id to each now you need to call a load function of js

$("#homeTab").on('click',function(){
    //firstly clear html part
    $('#bodycontent').html('');
    $('#bodycontent').load('hometab.html');//put your exact loaction of html file in my case I'm assume both are in same folder.
});

That's it all done you can do like this.

Hope it will work for you.

Upvotes: 0

Related Questions