how to display a accordian without reloading a page on clicking on a link_问答_开发者

how to display a accordian without reloading a page on clicking on a link

开发者 https://www.devze.com 2023-02-10 06:20 出处：网络

<head> <script type=\"text/javascript\"> $(function() { $(\".navigation a\").click(function() {

相关专题：jquery

<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.