2013-10-25 58 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