JQuery UI - 將內容區域鏈接到標籤

上下文：嘗試將標籤鏈接到html頁面上的特定內容div;使用JQuery UI 1.72和JQuery核心1.3.2 ...JQuery UI - 將內容區域鏈接到標籤

下面的示例代碼：試圖鏈接＃tab-1到＃message-1等，但沒有太多成功;在網上搜索了一個可行的例子，但找不到任何具體的東西;

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<link href="assets/css/core.css" rel="stylesheet" type="text/css" /> 
<link rel="stylesheet" type="text/css" href="assets/css/jquery-ui-1.7.2.custom.css"/> 
     <script type="text/javascript" src="assets/js/jquery-1.3.2.min.js"></script> 
     <script type="text/javascript" src="assets/js/jquery-ui-1.7.2.custom.min.js"></script> 
     <script type="text/javascript"> 
      $(function(){ 

       // Initialise Tabs 
       $('#tabs').tabs(); 

      }); 
     </script> 


</head> 
<body> 
<div id="wrapper"> 
    <div id="container"> 
    <div id="header"> 
    NAV GOES HERE 
    </div> 
    <div id="bannerArea"> 
    <div id="message-1"> 
    This is message 1 
    </div> 
    <div id="message-2"> 
    This is message 2 
    </div> 
    <div id="message-3"> 
    This is message 3 
    </div> <div id="message-4"> 
    This is message 4 
    </div> 

    </div> 
    <div id="prodInfo"> 
     <div id="tabs"> 
      <ul> 
       <li><a href="#tabs-1">Tab 001</a></li> 
       <li><a href="#tabs-2">Tab 002</a></li> 
       <li><a href="#tabs-3">Tab 003</a></li> 
       <li><a href="#tabs-4">Tab 004</a></li> 
      </ul> 
      <div id="tabs-1"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum sem quis neque adipiscing nec consequat nisl varius. Curabitur tincidunt, ante sed pulvinar vestibulum, urna dui viverra ligula, quis tincidunt tellus urna quis orci. Fusce a lacinia ante. Donec suscipit tellus turpis. Quisque nec massa eget ante imperdiet imperdiet. Mauris eget aliquet neque. In nisi dui, dictum ut tempor at, consequat vitae lorem. Nullam a nunc enim, ut sodales magna. Nam bibendum metus nec nulla dignissim interdum. Praesent facilisis euismod tincidunt. Vivamus cursus, turpis sit amet cursus euismod, lorem mauris tincidunt justo, euismod tempor tortor urna ac est. Nunc elit magna, rutrum at tempus bibendum, scelerisque sit amet massa. Vivamus et lectus ante, id dictum augue. </p> 
      </div> 
      <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div> 
      <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div> 
      <div id="tabs-4">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div> 

     </div> 
    </div> 
    </div> 
</div> 
</body> 
</html>

來源

2009-11-17 Bomski

你應該定義爲自己的鏈接，例如點擊行爲：

$('a.opentab1').click(function() { 
    $('#tabs-2, #tabs-3, #tabs-4').hide(); 
    $('#tabs-1').show(); 
});

你的鏈接應該是這樣的：<a href="javascript:;" class="opentab1"></a>

就個人而言，我會做的就是修改一點點您的HTML：

首先，用這種方式定義您的鏈接：<a href="javascript:;" class="opentab"></a>
然後，你的標籤現在<div class="tab"></div>
，使用JQuery，你需要做的僅僅是這樣的：

$('a.opentab').each(function(i) { $(this).click(function() { $('.tab').hide(); $('.tab:eq('+i+')').show(); }); });

（出於某種原因，我不能格式它正確，隨時編輯，如果你知道如何做到這一點:)）

這裏是你的代碼修改：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<link href="assets/css/core.css" rel="stylesheet" type="text/css" /> 
<link rel="stylesheet" type="text/css" href="assets/css/jquery-ui-1.7.2.custom.css"/> 
<script type="text/javascript" src="assets/js/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="assets/js/jquery-ui-1.7.2.custom.min.js"></script> 
     <script type="text/javascript"> 
       $(function(){ 

         //init 
         $('.tab, .message').hide(); 
         $('.tab:eq(0), .message:eq(0)').show(); 


         //define click for every link 
         $('ul#tab-links a').each(function(i) { 
          $(this).click(function() { 
           $('.tab, .message').hide(); 
           $('.tab:eq('+i+'), .message:eq('+i+')').show(); 
          }); 
         }); 
       }); 
     </script> 


</head> 
<body> 
<div id="wrapper"> 
    <div id="container"> 
    <div id="header"> 
    NAV GOES HERE 
    </div> 
    <div id="bannerArea"> 
    <div id="message-1" class="message"> 
    This is message 1 
    </div> 
    <div id="message-2" class="message"> 
    This is message 2 
    </div> 
    <div id="message-3" class="message"> 
    This is message 3 
    </div> <div id="message-4" class="message"> 
    This is message 4 
    </div> 

    </div> 
    <div id="prodInfo"> 
     <div id="tabs"> 
       <ul id="tab-links"> 
         <li><a href="#tabs-1">Tab 001</a></li> 
         <li><a href="#tabs-2">Tab 002</a></li> 
         <li><a href="#tabs-3">Tab 003</a></li> 
         <li><a href="#tabs-4">Tab 004</a></li> 
       </ul> 
       <div id="tabs-1" class="tab"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum sem quis neque adipiscing nec consequat nisl varius. Curabitur tincidunt, ante sed pulvinar vestibulum, urna dui viverra ligula, quis tincidunt tellus urna quis orci. Fusce a lacinia ante. Donec suscipit tellus turpis. Quisque nec massa eget ante imperdiet imperdiet. Mauris eget aliquet neque. In nisi dui, dictum ut tempor at, consequat vitae lorem. Nullam a nunc enim, ut sodales magna. Nam bibendum metus nec nulla dignissim interdum. Praesent facilisis euismod tincidunt. Vivamus cursus, turpis sit amet cursus euismod, lorem mauris tincidunt justo, euismod tempor tortor urna ac est. Nunc elit magna, rutrum at tempus bibendum, scelerisque sit amet massa. Vivamus et lectus ante, id dictum augue. </p> 
      </div> 
       <div id="tabs-2" class="tab">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div> 
       <div id="tabs-3" class="tab">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div> 
       <div id="tabs-4" class="tab">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div> 

     </div> 
    </div> 
    </div> 
</div> 
</body> 
</html>

來源

2009-11-17 12:06:29

是否可以用我的原始代碼進行內聯格式化？我對JS很新，雖然我明白你在問我的實現很差！ – Bomski 2009-11-17 13:30:09

感謝您的編輯;代碼中存在語法錯誤;兩個引用

相關問題

JQuery UI - 將內容區域鏈接到標籤

回答

相關問題