2013-10-25 83 views
0

我試圖用一個div ID等作爲創建鏈接:index.html#section3index.html#section4但它不工作:垂直標籤創建鏈接

<html> 
<head> 
<title>jQuery Vertical Tabs</title> 
<style type="text/css"> 
ul#verticalNav { 
    float:left; 
    clear:left; 
    width:15%; 
} 
div#sections { 
    float:right; 
    clear:right; 
    width:80%; 
} 
</style> 
<script type="text/javascript" 

src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/javascript"> 
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(); 
    } 
}); 
</script> 
</head> 
<body> 
    <h1>Vertical Navigation Example</h1> 
    <p>This page demonstrates a simple tabbed jQuery 

navigation scheme.</p> 
    <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"> 
      <h2>Section I</h2> 
      <p>Some content specific to this section...</p> 
     </div> 
     <div class="section" id="section2"> 
      <h2>Section II</h2> 
      <img src="#" alt="BADGER" /> 
     </div> 
     <div class="section" id="section3"> 
      <h2>Section III</h2> 
      <img src="#g" alt="SNAKE" /> 
     </div> 
    </div> 
</body> 
</html> 
+0

爲什麼不使用jquery標籤'' –

+0

嗨仍然無法正常工作。 – user2913707

回答

0

看看jQuery的標籤http://jqueryui.com/tabs/一個好現代解決方案大量的演示有幫助。

+0

您好新西蘭我改變現有的網站,這就是爲什麼我無法重新編碼... – user2913707

+0

你正在使用的Jquery的版本是嚴重的舊 –

+0

嗨,我可以改變到頁面加載功能: $('ul# verticalNav li:first-child a')。click(); – user2913707