tags:

views:

36

answers:

1

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>
+1  A: 

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");

});
Sarfraz
@sarfraz: Sorry its not working. even its not working when clicking
Mubeen
@Mubeen: Have you included jQuery in your page. Also post the html in your question above.
Sarfraz
@sarfraz: I added html
Mubeen
@Mubeen: See my update please.
Sarfraz
@sarfraz: It cahnges by clicking but not automatically
Mubeen
@Mubeen: The first elements are changed automatically. Other are changed by clicking. This is how tabbing system works.
Sarfraz
@sarfraz: Sorry but its not working. It shows only home it does not change to other... your demo is also not working
Mubeen
@Mubeen: Demo is working and when you click on links, the corersponding elements shows up. Others can verify that and in the mean time, you can wait if anyone actually understands your problem !
Sarfraz
@sarfraz: Demo is working when by clicking... I want it should change automatically from home to aboutus and services with some interval
Mubeen
@sarfraz: If its possible to change on load its ok. How can we do this on load
Mubeen