如何创建指向特定标签的链接？ （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/