jQuery를 UI 탭 또는 .load() - 탭 탭 콘텐츠를 다른 용기에 링크와 추가 URL

Question

내가 무엇을 볼 수에서 다른 용도의 다음 HTML strucuture

<div id-"top"> 
    <ul id="tabs"> 
     <li><a href="#tab-content-1">tab 1</a></li> 
     <li><a href="#tab-content-2">tab 2</a></li> 
     <li><a href="#tab-content-3">tab 3</a></li> 
    </ul> 
<!--/top--></div> 

<div id="content"> 
    <div id="tab-content-1">content 1</div> 
    <div id="tab-content-2">content 2</div> 
    <div id="tab-content-3">content 3</div> 
<!--/bottom--></div> 

는, jQuery를 UI 탭이 필요했다 ul과 내용이 같은 컨테이너에 있어야합니다.

그래서 나는이 메서드에 대한 링크를 "# tab-content-1"에서 "AjaxPages/tab-content-1.html"로 변경했으며 다음 코드를 사용했다. 그것은 작동하지만, URL을 추가하여 표시 가능한 컨텐츠를 반영 할 수 없으므로 북마크가 가능하고 직접 링크 될 수 있습니다.

$(function() { 
     $('#content').load('AjaxPages/tab-content-1.html'); 
     }); 

     $("#tabs li a").click(function(e) { 
     e.preventDefault(); 
     var $parent = $(this).parent(); 
     $parent.addClass("selected").siblings().removeClass("selected"); 
     var href = $(this).attr('href'); 
     $("#content").load(href); 
    }); 

나는이와 함께 기본 jQuery를 UI 탭이있는 URL로 DIV id를 추가 할 수 있습니다

if($(".tab-set") && document.location.hash){ 
       $.scrollTo(".tab-set"); 
      } 
      $(".tab-set ul").localScroll({ 
       duration:300, 
        hash:true 
      }); 

을 localScroll 및 scrollTo 플러그인과 함께. 어떤 충고? 이게 힘들지 않아!

Answer 1

나는 주소 표시 줄에서 해시를 처리 할 수 ​​없기 때문에 jsfiddle을 만들었지 만, 적어도 링크가 예상대로 작동하므로 클릭하면 도움이되기를 바랍니다.

HTML

<div id="top"> 
    <ul id="tabs"> 
     <li><a href="#1">tab 1</a></li> 
     <li><a href="#2">tab 2</a></li> 
     <li><a href="#3">tab 3</a></li> 
    </ul> 
</div><!--/top--> 

<div id="content"></div><!--/bottom--> 

JS

$(function() { 

    function loadContentTroughHash(hash) { 
     var orighash = hash ? hash : window.location.hash; 
     var h = 
      orighash.length > 1 
      && orighash.indexOf('#') != -1 
      && !isNaN(orighash.substring(1)) 
      ? orighash.substring(1) 
      : 1; 
     // hash is not just '#' but has '#' and hashtag is a number 
     // else use 1 
     $('#content').load('AjaxPages/tab-content-'+h+'.html'); 
    } 

    $("#tabs li a").click(function(e) { 
     e.preventDefault(); 
     var $t = $(this), 
      $parent = $t.parent(), 
      href = $t.attr('href'); 
     $parent.addClass("selected").siblings().removeClass("selected"); 
     loadContentTroughHash(href); 
    }); 

    loadContentTroughHash(); 

});