Question

似乎我的问题太难了，或者我无法正确解释我的问题!!

我正在使用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。

标签1有一个文本香蕉，带有对loadDetails方法的onclick引用。

我想要做的是，点击香蕉时，我希望标签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非常新手。所以我不知道能够描述我的问题有多好。但是我已尽力了。

希望得到一些帮助!!

Answer 1

你能把这个发布在小提琴上吗？

还可以尝试使用jQuery方法：

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

上面的代码使用了一个类选择器 - 在这种情况下，你选择带有“tabbertabhide”类的项目并使它们出现。同样，如果需要，也可以使用ID选择器。

在第一个选项卡的内容上添加onclick事件的新选项卡

1 个答案: