怀疑jquery内容的移动

时间:2010-10-26 05:10:37

标签: jquery

我在我的网页中使用jquery内容移动,我的代码是

  $(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");
    });

});

是否有可能自动更改msg_body

我的HTML是:

<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 个答案:

答案 0 :(得分:1)

更新

See the working demo here

使用的代码:

$(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;
    });

});

如您在评论中所说的那样点击链接,您可以这样做:

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

});