Home/ Questions/Q 8475511
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T17:54:49+00:00

I have three anchor tag links in my html with id’s switcher, switcher-b, switcher-c,

  • 0

I have three anchor tag links in my html with id’s “switcher”, “switcher-b”, “switcher-c”, when anchor tag “switcher” is clicked I would like to load content from a html page on my server “content.html”, anchor “switcher-b” will load “content-b.html”, and “switcher-c” will load “content-c.html”. I also have an anchor tag id “default” when clicked will reset / unload the html pages.

I figured a switch statement would be the best way to achieve my task but it is not working… I’m not proficient with jQuery/ JavaScript but I want to learn so if any JavaScript / jQuery developers with intermediate or advance knowledge can identify what I am doing wrong in my jQuery syntax and suggest a solution with explanation I truly will appreciate it.

Thank you for viewing my post and your help. 

 <!-- HTML code -->

     <html>

        </head>
        <body>
        <h1>AJAX Calls with jQuery load()</h1>
        <div id="switcher">
        <p><a id="switcher" href="#">Click here to fetch HTML content</a></p>
        <p><a id="switcher-b" href="#">Click here to fetch HTML content</a></p>
        <p><a id="switcher-c" href="#">Click here to fetch HTML content</a></p>
        <p><a id="default" href="#">Reset</a></p>
        </div>

            <div id="result"></div>
</body></html>      




<!-- jQuery Code -->

            $(function(){

                $('#switcher a').click(function(event){
                    var bodyClass = this.id.split('-')[1];

                    $('body').removeClass().addClass('bodyClass');

                    switch(bodyClass){
                        case 'switcher':
                            $('#result').load('content.html #content');
                            break;
                        case 'switcher-b':
                            $('#result').load('content-b.html #content');
                            break;
                        case 'switcher-c':
                            $('#result').load('content-c.html #content');
                            break;
                        default:
                            $('#result').unload();
                    }
                    return false;
                });

            });

            </script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
     $('#switcher a').click(function(event){
                    var bodyClass = this.id;

                    $('body').removeClass().addClass('bodyClass');

                    switch(bodyClass){
                        case 'switcher':
                            $('#result').load('content.html #content');
                            break;
                        case 'switcher-b':
                            $('#result').load('content-b.html #content');
                            break;
                        case 'switcher-c':
                            $('#result').load('content-c.html #content');
                            break;
                        default:
                            $('#result').unload();
                    }
                    return false;
                });

    Just remove .split('-')[1] You are taking just a second part of id, after “-” and than testing for full id. Of course it will always to default

    • 0