手風琴菜單停止努力增加HREF鏈接

這裏我簡單的手風琴：手風琴菜單停止努力增加HREF鏈接

<script type="text/javascript"> 
$(function() 
{ 
    $("dt.title").click(function() 
    { 
     $("div.info").slideUp("slow"); 
     $(this).next("div.info:hidden").slideDown("normal"); 
    }); 
}); 
</script>

和正常工作與這個網站：

<body> 
<div id="wrapper"> 
<div id="container"> 

<ul id="nav"> 
<dt class="title"><a href="#">About</a></dt> 
<dt class="title"><a href="#">Work</a></dt> 
<div class="info"> 
<ul> 
<li><a href="#">Bol</a></li> 
<li><a href="#">Annie</a></li> 
<li><a href="#">Imran</a></li> 
</ul> 
</div> 
<dt class="title"><a href="#">Contact</a></dt> 
<dt class="title"><a href="#">Links</a></dt> 
</ul> 
</div> 
<div id="content"> 
</div> 
</div> 
</body> 
</html>

當我把在href鏈接，菜單停止工作。例如：

<dt class="title"><a href="about.html">About</a></dt>

另請告訴我如何在菜單中添加活動和懸停狀態。

來源

2011-03-01 Kashif Ejaz

我認爲ü需要讓我們的JavaScript框架ü使用jQuery的......哪知道？ – Staelen 2011-03-01 07:44:55

是的，我正在使用jQuery！ – 2011-03-01 07:51:59

你，如果你打算加載的about.html內容在content元素，然後使用load方法忘了return false

<script type="text/javascript"> 
$(function() 
{ 
    $("dt.title").click(function(){ 
     $("div.info").slideUp("slow"); 
     $(this).next("div.info:hidden").slideDown("normal"); 
     return false; //do it here 
    }); 
}); 
</script> 
<body> 
    <div id="wrapper"> 
     <div id="container"> 

      <ul id="nav"> 
       <dt class="title"><a href="#">About</a></dt> 
       <dt class="title"><a href="about.html">Work</a></dt> 
       <div class="info"> 
        <ul> 
        <li><a href="#">Bol</a></li> 
        <li><a href="#">Annie</a></li> 
        <li><a href="#">Imran</a></li> 
        </ul> 
       </div> 
       <dt class="title"><a href="#">Contact</a></dt> 
       <dt class="title"><a href="#">Links</a></dt> 
      </ul> 
     </div> 
     <div id="content"> 
     </div> 
    </div> 
</body>

。您的功能將類似於

$("dt.title").click(function(){ 
     $("div.info").slideToggle("slow"); 
     $('#content').load($(this).find('a').attr('href')); 
     return false; 
    });

但是，這不適用於跨網域網址。

[更新]

<script type="text/javascript"> 

//no use for this var 
var loader = $("<div></div>").html('Loading') 

$(document).ready(function() { 

    $(".title").click(function(){ 

     $(this).find("ul").slideToggle("slow"); 

     //do all the animations here 
     //but using $.get, you will get more animation effect 
     //I guess 

     $('#content').load($(this).find('a').attr('href')); 

     return false; 
    }); 

    //similarly for inner link 
    $(".title ul a").click(
     function() 
     { 
      $('#content').load($(this).attr('href')); 

      return false; 
    }); 

}); 

</script> 
<body> 
<div id="wrapper"> 
    <div id="container"> 

    <ul id="nav"> 
    <dt class="title"><a href="test.php">About</a> 
     <ul> 
       <li><a href="test.php">Bol</a></li> 
       <li><a href="test.php">Annie Khalid</a></li> 
       <li><a href="test.php">Imran</a></li> 
     </ul> 
    </dt> 

    <dt class="title"><a href="test.php">Work</a> 
     <ul> 
       <li><a href="test.php">Bol</a></li> 
       <li><a href="test.php">Annie Khalid</a></li> 
       <li><a href="test.php">Imran</a></li> 
     </ul> 
    </dt> 

    <dt class="title"><a href="test.php">Contact</a> 
     <ul> 
       <li><a href="test.php">Bol</a></li> 
       <li><a href="test.php">Annie Khalid</a></li> 
       <li><a href="test.php">Imran</a></li> 
     </ul> 

    </dt>  

    <dt class="title"><a href="test.php">Links</a> 
     <ul> 
       <li><a href="test.php">Bol</a></li> 
       <li><a href="test.php">Annie Khalid</a></li> 
       <li><a href="test.php">Imran</a></li> 
     </ul> 

    </dt> 
    </ul>  

    </div> 

    <div id="content">  
    <p>Welcome to my site!!!!!!!!!!!!!!!!!!!!!!!</p> 

    <p>In this tutorial we will be taking your average everyday website and enhancing it with jQuery. 
    We will be adding ajax functionality so that the content loads into the relevant container instead 
     of the user having to navigate to another page. We will also be integrating some awesome effects... 
    </p> 
    </div> 

</div> 
</body>

來源

2011-03-01 07:53:36

我試過，但關於頁面沒有加載。例如，當我點擊關於工作菜單滑動但關於頁面不加載。這是爲什麼？ – 2011-03-01 08:23:24

@Kashif Ejaz你的意思是你想要在某些div中加載'about.html'的內容。我想你應該使用'load（）'方法做到這一點， – 2011-03-01 08:35:55

謝謝你告訴我，這是不可能的。請向下滾動...... ajax呼叫作品，但不是菜單。看一看！ – 2011-03-01 08:44:58

這是因爲您沒有阻止瀏覽器執行對鏈接的請求。因此，它被視爲一個鏈接。你可以在你點擊函數的末尾return false;或動態替換href屬性值（JavaScript）到#;

[編輯] 這應該工作，即使我沒有測試過。希望它至少能給你這個想法。

<script type="text/javascript"> 
$(function() 
{ 
    $("dt.title").click(function(){ 
     $("div.info").slideUp("slow"); 
     $(this).next("div.info:hidden").slideDown("normal"); 
     return false; 
    }).hover(function(){ 
     $(this).addClass("hover"); 
     },function(){ 
     $(this).removeClass("hover"); 
    }).each(function(){ 
     $(this).attr("href","#"); 
    }); 
}); 
</script>

來源

2011-03-01 07:49:06 JRomero

告訴我究竟是怎麼回事？ – 2011-03-01 07:52:59

我已經添加了應該可以工作的代碼，但是在請求複製/粘貼解決方案之前，您應該嘗試一些試驗和錯誤。我覺得你這樣學得更好。希望能幫助到你。 – JRomero 2011-03-01 08:05:13

我厭倦了，但它做了什麼，它讓菜單工作，但關於頁面不加載。 – 2011-03-01 08:15:21

手風琴菜單停止努力增加HREF鏈接

回答

相關問題