how to display a accordian without reloading a page on clicking on a link
<head>
<script type="text/javascript">
$(function() {
$(".navigation a").click(function() {
//Statement 1:-after comm开发者_开发百科enting this
//$("#content").load($(this).attr("href"));
//Statement 2:-nd adding these statements
$("#content").load($(this).attr("href"), function() {
$("accordian").accordion({
collapsible: true
});
return false;
});
});
</script>
</head>
<body>
<ul class="navigation">
<li><a href="robo.html">Content 1</a></li>
<li><a href="content2.html">Content 2</a></li>
<li><a href="content3.html">Content 3</a></li>
</ul>
<div id="content">
</div>
if I use
Statement 1:
I want to display a accordian on click of robo.html But it is not getting displayed only contents of accordian are getting displayed.But if I run robo.html the accordian is getting displayed.
ELSE
Statement 2 i am getting directed to new page
You will need to create the accordion after the load is complete. If you have script to create the accordion in robo.html it won't be run when using the load function, which may be the problem you're having.
Something like this:
$(".navigation a").click(function() {
$("#content").load($(this).attr("href"), function() {
$("<accordion selector>").accordion({
<accordion parameters>
});
return false;
});
The callback function within the load is called after the load is complete, so the HTML describing the accordion will be in the document at that time.
加载中,请稍侯......
精彩评论