기본 탐색으로 JQuery 탭 사용

JQuery 테마를 상속하고 새 페이지로 리디렉션 (HTTP GET)하는 목표 인 JQuery UI 탭.기본 탐색으로 JQuery 탭 사용

저는 다음 코드를 사용하여 90 %를 차지하고 있지만 표적 URL을 앵커 제목 (표 위젯에 HREF가 로컬 페이지 선택자로 제공됨)에 넣는 것이 타협되었습니다.

이 방법이 효과적이지만 검색 엔진이 검색하고 색인을 생성 할 수 있도록하기 위해 HREF를 실제 URL로 사용하고 싶습니다.

생각하십니까?

<script> 
$(function() { 
    $("#tabs").tabs(); 
    $(".nav-link") 
     .click(function() { 
      window.location = this.title; 
     }); 
}); 
</script> 

<div id="tabs"> 
<ul> 
    <li><a href="#tabs-1" title="home.html" class="nav-link">Home</a></li> 
    <li><a href="#tabs-2" title="contact.html" class="nav-link">Contact Us</a></li> 
</ul> 
<div id="tabs-1"></div> 
<div id="tabs-2"></div> 
</div>

출처

2009-07-14 Cubic Compass

, 당신의 HTML 구조는 다음과 같습니다 경우

<div id="tabs"> 
<ul> 
     <li><a href="home.html">Home</a></li> 
     <li><a href="contact.html">Contact Us</a></li> 
</ul> 
<!-- Make sure that your DIVs are called 'tabs-0', 'tabs-1' etc. 'tabs-0' will be referred by first link, tabs-1 will be referred by second link, so on and so forth. --> 
<div id="tabs-0"></div> 
<div id="tabs-1"></div> 
</div>

, 당신은 할 수 있습니다 :

이제

<script> 
$(function() { 

     var tabId = '#tabs'; 
     $(tabId + ' a').each(
      function(index, val) 
      { 
       $(this).attr('href', tabId + '-' + index); 
      } 
     ); 

     $("#tabs").tabs(); 
}); 
</script>

, 검색을 엔진은 사용자가 귀하의 일반 탭 동작을 볼 수있는 링크를 볼 것입니다.

출처

2009-07-14 00:36:40 SolutionYogi

예 ... 당신이 가고있는 방향을 봅니다. 크롤러가 의도 한 href를 찾도록 허용하지만 탭 바인딩 전에 동적으로 덮어 씁니다. 감사. 나는 이것을 시도 할 것이다! –

그래, 그건 생각이야. 문제가 발생하면 다시 게시하십시오. 행운을 빕니다. – SolutionYogi

jquery를 통해이 작업을 수행해야하는 이유에 대해 혼란 스럽습니다. Http Get 리다이렉션을 원한다면, 그게 바로 <a href=""> tages가하도록 설계된 것입니다. 당신이, 당신이 뭔가를 할 수있는 특정 HTML 구조를 따라야합니다 경우

출처

2009-07-14 00:27:36 andychase

저는 그들이 HTTP GET을 사용하고 싶지 않다고 생각합니다. 그들은 href 태그 안에 실제 링크를 사용하려고하지만 JQ UI는 내용과 관련이 있어야합니다. –

작성자는 탭 기반 탐색 (사용자 친화적)을 위해 jQuery를 사용하려고하지만 검색 엔진이 콘텐츠를 색인 할 수 있도록 실제 링크도 제공합니다. – SolutionYogi

JQuery UI 테마를 상속 받아 최상위 레벨 탐색이 다른 UI 요소와 일치하도록하고 싶습니다. –

기본 탐색으로 JQuery 탭 사용

답변

관련 문제