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>
<a href="#about_us" class="linkclass" >About Us</a>
<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");
});
精彩评论