탭 패널 및 해시 변경 플러그인

Question

다음 코드를 사용하여 탭 패널을 만들었으며 그 중 하나만 제대로 수행했습니다. 나는 easytabs를 시도했지만 그것이 가지고있는 것과 제대로 작동하지 않습니다. 그래서, 여기에 우리가 간다 :

/* 
* The following lines are for main tabbed panels 
*/ 

$(function() { 

    $('.nav a').click(function() { 
     // save $(this) in a variable for efficiency 
     var $this = $(this); 

     // hide panels 
     $('.panel').hide(); 
     $('.nav a.active').removeClass('active'); 

     // add active state to new tab 
     $this.addClass('active').blur(); 
     // retrieve href from link (is id of panel to display) 
     var panel = $this.attr('href'); 
     // show panel 
     $(panel).fadeIn(250); 

     // don't follow link down page 
     return (false); 
    }); 
    // end click 

    // open first tab 
    $('.nav li:first a').click(); 

}); 
// end function 

나는 Hashchange를 사용 BBQ라는 플러그인을 발견했다. http://benalman.com/projects/jquery-bbq-plugin/ 브라우저에서 뒤로 버튼을 사용할 수 있도록 내 코드와 함께 사용하는 방법을 이해하는 것이 좋지 않습니다. 도와주세요. 도움을 주셔서 미리 감사드립니다. 감사합니다. Deviad

Answer 1

이 방법으로 문제를 해결했습니다.

/* 
* jQuery hashchange event - v1.2 - 2/11/2010 
* http://benalman.com/projects/jquery-hashchange-plugin/ 
* 
* Copyright (c) 2010 "Cowboy" Ben Alman 
* Dual licensed under the MIT and GPL licenses. 
* http://benalman.com/about/license/ 
*/ 
(function($, i, b) { 
    var j, k = $.event.special, c = "location", d = "hashchange", l = "href", f = $.browser, g = document.documentMode, h = f.msie && (g === b || g < 8), e = "on" + d in i && !h; 
    function a(m) { 
     m = m || i[c][l]; 
     return m.replace(/^[^#]*#?(.*)$/, "$1") 
    } 
    $[d + "Delay"] = 100; 
    k[d] = $.extend(k[d], { 
     setup : function() { 
      if (e) { 
       return false 
      } 
      $(j.start) 
     }, 
     teardown : function() { 
      if (e) { 
       return false 
      } 
      $(j.stop) 
     } 
    }); 
    j = (function() { 
     var m = {}, r, n, o, q; 
     function p() { 
      o = q = function(s) { 
       return s 
      }; 
      if (h) { 
       n = $('<iframe src="javascript:0"/>').hide().insertAfter("body")[0].contentWindow; 
       q = function() { 
        return a(n.document[c][l]) 
       }; 
       o = function(u, s) { 
        if (u !== s) { 
         var t = n.document; 
         t.open().close(); 
         t[c].hash = "#" + u 
        } 
       }; 
       o(a()) 
      } 
     } 
     m.start = function() { 
      if (r) { 
       return 
      } 
      var t = a(); 
      o || p(); 
      (function s() { 
       var v = a(), u = q(t); 
       if (v !== t) { 
        o(t = v, u); 
        $(i).trigger(d) 
       } else { 
        if (u !== t) { 
         i[c][l] = i[c][l].replace(/#.*/, "") + "#" + u 
        } 
       } 
       r = setTimeout(s, $[d + "Delay"]) 
      })() 
     }; 
     m.stop = function() { 
      if (!n) { 
       r && clearTimeout(r); 
       r = 0 
      } 
     }; 
     return m 
    })() 
})(jQuery, this); 
/* 
* 
* Tabbed Browsing with back button support. Requires Hashchange plugin. 
* 
*/ 

$(function() { 

$(".nav a").live("click", function(e) { 

    updateTabs($($(this).attr("href"))); 

}); 

//Grab hash off URL (default to first tab) and update 

$(window).bind("hashchange", function(e) { 

    var anchor = $(location.hash); 

    if (anchor.length === 0) { 

     anchor = $(".panel div:eq(0)"); 

    } 

    updateTabs(anchor); 

}); 

//Pass in the tab and show appropriate contents 

function updateTabs(tab) { 

    $(".nav a.active") 

     .removeClass("active") 

     .filter(function(index) { 

     return $(this).attr("href") === '#' + tab.attr("id"); 

     }).addClass("active"); 

    $(".panel").hide(); 

    tab.show(); 

} 

//Fire the hashchange event when the page first loads 

$(window).trigger('hashchange'); 
$('.nav li:first a').click(); 
}); 

});