Doubt in jquery content move

Question

Hi All,

Im using jquery content move in my webpage and my code is

  $(document).ready(function()
{
    //hide the all div except first one
    $('.msg_body:not(:first)').hide();
    //when the anchor is clicked content gets faded
    $("a.linkclass").click(function()
    {
        $('.msg_body').fadeOut("slow");
        $($(this).attr("href")).fadeIn("slow");
    });

});

Is there any possiblities to automatically change msg_body

My HTML is:

<a href="#home" class="linkclass" >Home</a>&nbsp;&nbsp;
<a href="#about_us" class="linkclass" >About Us</a>&nbsp;&nbsp;
<a href="#service" class="linkclass" >Services</a>
<div class="container"> 
 <div id="home" class="msg_body"> <b>Home</b><br /> lorem ipsum dolor sit amet, consectetuer adipiscing elit </div>
<div id="about_us" class="msg_body"> <b>About US</b><br /> lorem ipsum dolor sit amet, consectetuer adipiscing elit </div>
<div id="service" class="msg_body"> <b>Services </b><br /> lorem ipsum dolor sit amet, consectetuer adipiscing elit orem </div> </div>

Answer 1

Update:

See the working demo here

Code Used:

$(document).ready(function()
{
    //hide the all div except first one
    $('.msg_body:not(:first)').hide();

    $('.msg_body').fadeOut("slow");
    $($('a.linkclass').attr("href")).fadeIn("slow");

   $("a.linkclass").click(function()
    {
        $('.msg_body').fadeOut("slow");
        $($(this).attr("href")).fadeIn("slow");
        return false;
    });

});

---

Without clicking on the link as you said in your comment, you can do this way:

$(document).ready(function()
{
    //hide the all div except first one
    $('.msg_body:not(:first)').hide();

    $('.msg_body').fadeOut("slow");
    $($('a.linkclass').attr("href")).fadeIn("slow");

});