2011-11-02 25 views
1

似乎我的問題太難了,或者我無法正確解釋我的問題!在第一個標籤的內容上添加onclick事件的新選項卡

我正在使用barelyfitz tabifier。

我的HTML是:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

<html lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 

     <title>Simple Tabber Example</title> 

     <script type="text/javascript" src="tabber.js"></script> 
     <link rel="stylesheet" href="example.css" TYPE="text/css" MEDIA="screen"> 
     <link rel="stylesheet" href="example-print.css" TYPE="text/css" MEDIA="print"> 

     <script type="text/javascript"> 

      /* Optional: Temporarily hide the "tabber" class so it does not "flash" 
      on the page as plain HTML. After tabber runs, the class is changed 
      to "tabberlive" and it will appear. */ 

      document.write('<style type="text/css">.tabber{display:none;}<\/style>'); 

      function loadDetails() 
      { 
       alert("here"); 
       document.getElementById('myTab').tabber.tabShow(1); 
       alert("not here"); 
      } 

     </script> 

    </head> 

    <body> 

    <h1>Tabber Example</h1> 

    <div class="tabber" id="myTab"> 

    <div class="tabbertab"> 
     <h2>Tab 1</h2> 

     <A href="#" onclick="loadDetails()";>Banana</A> 

    </div> 

     <div class="tabbertabhide"> 
      <h2>Tab 4</h2> 
      <p>Tab 4 content.</p> 
     </div> 


</div> 

</body> 
</html> 

至於清晰,標籤4最初是隱藏它的類是tabbertabhide。

和TAB 1具有的onclick參照loadDetails方法文本香蕉。

我想要做的是,在點擊香蕉,我想片4成爲可見。

然而,在loadDetails方法的document.getElementById線不具有任何影響。

任何一個可以請幫我這個具體的技術問題!


下面是我以廣義方式詢問的同一問題!


問題:

我有與搜索水果索引頁面上的搜索形式的web應用。

根據輸入的搜索標準,結果將有水果的清單。這個中的每個成員都會有一個到javascript函數的回調鏈接。就像:

<html> 
    <head> 

    <script type="text/javascript"> 
    //Function to load further details on fruits 
     function loadDetails(){ 
    //this will do a call back to server and will fetch details in a transfer object     
     } 

     </script> 
    </head> 

    <body> 
    <form method="post"> 
     <A href="#" onclick="loadDetails('banana')";>Banana</A> 
     <A href="#" onclick="loadDetails('apple')";>Apple</A> 
    </form> 
    </body> 
</html> 

現在我的問題是,我想顯示在loadDetails函數中生成的選項卡上的細節。

東西在www.barelyfitz.com/projects/tabber/ 而是動態的標籤生成在第一個選項卡的內容onclick事件的線。

換句話說,第一個選項卡都會有水果的可點擊列表和點擊一個水果,一個新的標籤將得到與水果從數據庫中獲取更多詳細信息打開。

是否有可能使用簡單的JavaScript? 另外,是否有可能在沒有AJAX的jQuery中做到這一點。我不能使用ajax。

我對JavaScript非常陌生。所以我不知道能夠描述我的問題。但盡力而爲。

希望得到一些幫助!

回答

0

你可以在小提琴上發表嗎?

也可以嘗試這樣做的jQuery的方式具體做法是:

function loadDetails() 
{ 
    $('.tabbertabhide').show(); //make it appear without any animation OR 
    $('.tabbertabhide').fadeIn(); //make it to fade in. 
} 

上面的代碼使用了類selector-在這種情況下,您選擇的項目與類「tabbertabhide」,使他們出現。同樣,如果需要,也可以使用ID選擇器。

相關問題