Question

以下是我在两个标签之间切换的HTML代码，并相应地显示内容

       <div class="tab"  id="tab-1" onclick="switch_tab(1)">
            <a class="tab-text"  href="">ABC</a>
        </div>
        <div class="tab" id="tab-2" onclick="switch_tab(2)">
            <a class="tab-text" href="">XYZ</a>
        </div>
        <div id="content">
          <div id="content-abc"> ... </div>
          <div id="content-xyz"> ... </div>
        </div>

JavaScript的：

        function switch_tab(index) {    
         switch(index) {
          case 1:
              hide_content("content-xyz");
              show_content("content-abc");
              break;
          case 2:
              hide_content("content-abc");
              show_content("content-xyz");
              break;
         }
        }

        function show_content(idname) {
         document.getElementById(idname).style.display = "block";
        }

        function hide_content(idname) {
         document.getElementById(idname).style.display = "none";
        }

但它不起作用。帮助

Answer 1

我没有看到您在hide_content或show_content函数中使用的id的任何元素

Answer 2

我认为问题是<a>标记，其值为href空白。将这些更改为“＃”（当然还添加“内容”div）可以解决问题。如果不需要造型，你也可以摆脱锚点，因为click事件是在包装器div上处理的。

http://jsfiddle.net/9p2TM/

Answer 3

您应该使用JS DOM设置onclick属性。通过ID设置索引像这样： var divs = document.getElementsByTagName（'div'）;

for (var i = 0, il = divs.length; i < il; i++) {
    divs[i].addEventListener("click", createHandler(divs[i], true));
}

完整示例： http://jsfiddle.net/JBL95/

如何通过html将参数传递给函数并通过javascript访问？

3 个答案: