如何創建指向特定標籤的鏈接？ （jQuery的）

Question

function showSection(sectionID) { 
    $('div.section').css('display', 'none'); 
    $('div'+sectionID).css('display', 'block'); 
} 
$(document).ready(function(){ 
    if (
     $('ul#verticalNav li a').length && 
     $('div.section').length 
    ) { 
     $('div.section').css('display', 'none'); 
     $('ul#verticalNav li a').each(function() { 
      $(this).click(function() { 
       showSection($(this).attr('href')); 
      }); 
     }); 
     $('ul#verticalNav li:first-child a').click(); 
    } 
}); 

<ul id="verticalNav"> 
    <li><a href="#section1">Section I</a></li> 
    <li><a href="#section2">Section II</a></li> 
    <li><a href="#section3">Section III</a></li> 
</ul> 


    <div id="sections"> 
     <div class="section" id="section1"> 
      <p>Some content specific to this section...</p> 
     </div> 
     <div class="section" id="section2"> 
      <img src="#" alt="BADGER" /> 
     </div> 
     <div class="section" id="section3"> 
      <img src="#g" alt="SNAKE" /> 
     </div> 
    </div> 

我要創建特定鏈接的index.html＃SECTION1每個標籤例如，index.html的＃2節

Answer 1

試試這個，

if(window.location.hash) 
{ 
    showSection(window.location.hash);// to get the div id 
} 

全碼

function showSection(sectionID) { 
    $('div.section').css('display', 'none'); 
    $('div'+sectionID).css('display', 'block'); 
} 
$(document).ready(function(){ 

    if (
     $('ul#verticalNav li a').length && 
     $('div.section').length 
    ) { 
     $('div.section').css('display', 'none'); 
     //$('ul#verticalNav li a').each(function() { // no need for each loop 
     $('ul#verticalNav li a').click(function() { // Use $('ul#verticalNav li a').click 
      showSection($(this).attr('href')); 
     }); 
     //}); 
     if(window.location.hash) // if hash found then load the tab from Hash id 
     { 
      showSection(window.location.hash);// to get the div id 
     } 
     else // if no hash found then default first tab is opened 
     { 
      $('ul#verticalNav li:first-child a').click(); 
     } 
    } 
}); 

Answer 2

這已經被問了很多次，應該很容易與一些谷歌搜索。

$("#tabs").tabs({ 
     select: function(event, ui) {     
      window.location.hash = ui.tab.hash; 
     } 
    }); 

這裏jQuery UI tabs, update url when clicking on a different tab

Answer 3

回答您可以把每個部分的錨定標記與特定名稱。例如，對於SECTION1你會這麼做：

<a name="section1"> 
    <div class='section" id="section1"> 
     <p> Some content specific to this section...</p> 
    </div> 
</a> 

然後，你可以簡單地引用像這樣的部分（在同一頁面）：

<a href="#section1">Click me to get to section1!</a> 

如果你嘗試和參考section1（這將讓我們從像about.html另一頁上說index.html），你只會有以下錨元素：

<a href="index.html#section1">Clicke me to navigate from about.html to section1 on index.html<a> 

此外，您可以嘗試使用window.location.hash [它所有主流瀏覽器都支持]如下：

window.location.hash = 'section1'; 

Answer 4

試試這個 代碼演示

頁面將滾動到特定的部分上點擊該部分的標題

http://css-tricks.com/snippets/jquery/smooth-scrolling/