Calling Function in href help

I have the following JS in my site:

$(document).ready(function() {
                           
    var hash = window.location.hash.substr(1);
    var href = $('#nav li a').each(function(){
        var href = $(this).attr('href');
        if(hash==href.substr(0,href.length-5)){
            var toLoad = hash+'.html #content';
            $('#content').load(toLoad)
        }                                            
    });

    $('#nav li a').click(function(){
                                  
        var toLoad = $(this).attr('href')+' #content';
        $('#content').hide('fast',loadContent);
        $('#load').remove();
        $('#wrapper').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('normal');
        window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
        function loadContent() {
            $('#content').load(toLoad,'',showNewContent())
        }
        function showNewContent() {
            $('#content').show('normal',hideLoader());
        }
        function hideLoader() {
            $('#load').fadeOut('normal');
        }
        return false;
        
    });

});

I have the following html on my site:

<div id="content001">
<div id="wrapper">
    <ul id="nav">
        <li><a href="index.html">welcome</a></li>
        <li><a href="about.html">about</a></li>
        <li><a href="portfolio.html">portfolio</a></li>
        <li><a href="contact.html">contact</a></li>
        <li><a href="terms.html">terms</a></li>
    </ul>
    <div id="content">        
        <h2>Welcome!</h2>
        <p>Nulla facilisi. Nam massa dolor, gravida nec, luctus vitae, tristique vel, arcu. Suspendisse rutrum. Integer ligula velit, malesuada sed, rhoncus sed, feugiat eget, mi. Nulla pharetra convallis mi. Cras euismod consectetuer mi. Integer molestie tincidunt ante. Vestibulum lacinia orci a est. Quisque aliquam dolor non urna. Praesent felis. Nulla elementum. Curabitur mi augue, mollis at, volutpat ut, fermentum in, neque. Donec eget arcu. Donec id velit nec arcu facilisis aliquet. Nulla vel nibh ac lacus tristique interdum. Cras sed dui in nibh hendrerit dignissim. Aenean at est ac purus consectetuer mollis.</p>
    </div>
    <div id="foot">Social Links Here Maybe .. Or Whatever</div>
</div>

</div>


This sets up a nice little slider menu but what I need is a href link to make the tabs slide just like the links you see above for about.html … etc…

I think it should be something along the lines of :

<a href="javascript:loadContent('#nav','about.html')">about tab</a> 

But nope … Please Help if you know :slight_smile:

Running javascript from a href is not generally considered to be best practice nowadays. A href is meant for navigationg to another location, not for running javascript.

A more acceptable way to do it nowadays is to use an onclick with return false; at the end to suppress the default onclick action for the <a> which is to navigate to the href.


<a href="" onclick="myFunction(); return false;">My Link</a>


An even more acceptable way these days is to keep the concerns of the behaviour and the content separate, for easier management.

<a id="abouttab">about tab</a>

document.getElementById('abouttab').onclick = function () {
    loadContent('#nav','about.html');
}

Or perhaps even a bit more fancier, so that you can then use it multiple times with different content:


function tabClickHandler(linkId, sourceUrl, targetSelector) {
    document.getElementById(linkId).onclick = function () {
        loadContent(targetSelector , sourceUrl);
    };
}
tabClickHandler('abouttab', 'about.html', '#nav');