使用jQuery隐藏/显示内容

Question

I am having a website that basically shows information related to a business house. I do not want to have a multi page website (for about us, contact us and other such pages), but I have a considerable amount of content to be shown.

And I would not prefer to load content again and again through consecutive fetches from the server through AJAX.

So, can I have all my content loaded on the first load itself and have only the required content shown (visible) and hide and show the appropriate content using jQuery. Is it a proper approach that can be adopted ? What are its possible disadvantages ?

Answer 1

What you are asking can be achieved with a Singlepage framework like: http://alvarotrigo.com/fullPage/ or AngularJS

Pros:

• Front-end access to all content immediately

Cons:

• Long page load which might result in 404 or slow connection
• Dependent on user device. If user doesn't have a current browser then your page might break.
• Client might not have JavaScript enabled, breaking your website completely
• If there is a lot of data, then the user device might not be able to handle it. JavaScript can be quite taxing on older devices.

EDIT 1

My personal preference for Singlepage solutions is AngularJS, so if you are interested in this i would recommend this tutorial:

scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating

Answer 2

<a href="#about-us" title="About Us">About Us</a>

<div id="about-us" class="content">Some content here</div>


<script>
    $(document).ready(function(){
        $('a').click(function(){
            var link = $(this).attr('href');
            $('.content').hide();
            $(link).show();
        });
    });
</script>