隱藏本文不上撥動留了

Question

這裏是我的小提琴：http://jsfiddle.net/mikeritter/prsfM/28/

這裏是我的jQuery：

$(document).ready(function(){ 
    function howdy(n){ 
     alert('Howdy '+n+'!'); 
    } 

    function hideArts(){ 
     $('article').hide(); 
    } 
    hideArts(); 

    $("a.toggleart").click(function(){ 
     var cur = $(this).parent().index(); 
     //alert(cur); 
     $('article').eq(cur).toggle(); 
    }); 
}); 

爲什麼文章立刻消失後切換？

Answer 1

您有一個<a>將用戶發送到新頁面。你應該通過添加href="#"或onclick="return false;"

用戶發送到href=""將刷新頁面，如果你不取消它取消<a>事件。

Answer 2

嘗試this JSFiddle;我修正自己的一對夫婦修復：

• 你click處理程序需要e.preventDefault()停止<a>導航到一個新的頁面：

  $("a.toggleart").click(function(e) { 
      e.preventDefault(); 
  

• 你不必隱藏你的使用JavaScript的面板。一個簡單的

  article { 
      display: none; 
  } 
  

  就足夠了。

你的唯一的事需要做來解決你的問題是添加

e.preventDefault(); 

爲了自己的點擊處理程序，停止執行該事件的默認行爲的瀏覽器是，在這情況下，導航到另一個頁面。

Answer 3

變化

$("a.toggleart").click(function(){ 
    var cur = $(this).parent().index(); 
    $('article').eq(cur).toggle(); 
}); 

到

$("a.toggleart").click(function(e){ // added the e as the parameter, it maps to the event 
    e.preventDefault(); // this line will cancel the default link action .. 
    var cur = $(this).parent().index(); 
    $('article').eq(cur).toggle(); 
}); 

要取消鏈接的默認功能...

演示在http://jsfiddle.net/gaby/prsfM/29/