开发者

Doubt in jquery content move

开发者 https://www.devze.com 2023-01-21 18:46 出处:网络
Im using jquery content move in my webpage and my code is $(document).ready(function() { //hide the all div except first one

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</开发者_JAVA百科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>


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

});
0

精彩评论

暂无评论...
验证码 换一张
取 消