onclick不允许我将div显示设置为隐藏，将另一个设置为内联，隐藏注释掉后，内联工作一次

Question

我已经尝试过在Google上进行搜索，但是没有什么比我遇到的问题要多的了，因此我可以肯定这不是重复的主题。

我有3个div，我想隐藏2个并使用JavaScript显示一个。 它不应该很复杂，因为我之前已经做过很多次了，但是它让我发疯了。

以下是我的div布局：

<div id="top_scorer">
   <span id="top_scores_menu">
      <a onclick='getTopPlayer("top_mens")'>Men's</a>
      <a onclick='getTopPlayer("top_womens_2nd")'>Women's 1st</a>
      <a onclick='getTopPlayer("top_womens_1st")'>Women's 2nd</a>
   </span>

   <div id="top_mens" class="topPlayer">
      <? echo $mens_top_scorers; ?>
   </div>
   <div id="top_womens_1st" class="topPlayer" style="display: none ;">
      <? echo $womens_1st_top_scorer; ?>
   </div>
   <div id="top_womens_2nd" class="topPlayer" style="display: none ;">
      <? echo $womens_2nd_top_scorer; ?>
   </div>
</div>

这是我尝试使用的简单JavaScript：

function getTopPlayer(WhoToShow){
    //alert(WhoToShow);
    document.getElementsByTagName('topPlayer').style.display='none';
    document.getElementById(WhoToShow).style.display='inline';

}

奇怪的是，如果我注释掉了函数中除警报以外的所有内容，它一直都按预期工作，如果我注释掉了document.getElementById(WhoToShow).style.display='inline'之外的所有内容然后链接是不可单击的，如果我离开document.getElementById(WhoToShow).style.display='inline'; 没有评论，它根本不起作用。

现在，我尝试了许多不同的方法，最初，我试图使用以下方法：

function getTopPlayer(WhoToShow, hide1, hide2){
    document.getElementById(hide1).style.display="none";
    document.getElementById(hide2).style.display="none";
    document.getElementById(WhoToShow).style.display="inline";
}

这在第一次单击时效果很好，然后会在以后的其他onclick上发生。 我能想到的唯一的另一件事可能是产生了一种效果，就是php代码只是回显已发布的google doc图形iframe，除非我愚蠢地忽略了一些嘲笑。

这是php回显的google doc iframe脚本的示例：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/static/modules/gviz/1.0/chart.js">
{
    "dataSourceUrl": "//docs.google.com/spreadsheet/tq?key=0AmOgECNc58wCdFJzUVkyMmJ1dTBqXzVuQmxlc3F0UkE&transpose=1&headers=1&range=A1%3AB100&gid=1&pub=1",
    "options": {
        "vAxes": {
            "1": {
                "useFormatFromData": true
            },
            "0": {
                "useFormatFromData": true
            }
        },
        "title": "Womens 2nd Team",
        "booleanRole": "certainty",
        "animation": {
            "duration": 0
        },
        "hAxis": {
            "title": "Number of Goals",
            "useFormatFromData": true,
            "viewWindowMode": "pretty",
            "viewWindow": {}
        },
        "isStacked": false,
        "width": 600,
        "height": 371
    },
    "state": {},
    "chartType": "BarChart",
    "chartName": "Chart 3"
}

我真的很感谢任何人都可以提供的任何帮助或建议，因为我准备在笔记本电脑上摆脱沮丧。

已解决（种类）

因此我能够在Google生成的脚本中找到问题的根源，我将交互式图表脚本替换为图像图表，并且可以按预期工作，但是不幸的是，我无法使其与交互式图表一起使用

Answer 1

更新的答案！ 用数字重命名div，然后循环显示它们，仅显示选定的数字。

示例： http ： //jsfiddle.net/howderek/Ysaer/

Answer 2

您使用的是getElementsByTagName而不是getElementsByClassName 。 它返回一个我们需要遍历的元素数组。

HTML

<div id="top_scorer">
   <span id="top_scores_menu">
      <a href="#" onclick='getTopPlayer("top_mens");return false;'>Men's</a>
      <a href="#" onclick='getTopPlayer("top_womens_1st");return false;'>Women's 1st</a>
      <a href="#" onclick='getTopPlayer("top_womens_2nd");return false;'>Women's 2nd</a>
   </span>

   <div id="top_mens" class="topPlayer">
      mens top
   </div>
   <div id="top_womens_1st" class="topPlayer" style="display: none ;">
      womens 1st
   </div>
   <div id="top_womens_2nd" class="topPlayer" style="display: none ;">
     womens 2nd
   </div>
</div>​

使用Javascript

var getTopPlayer = function(WhoToShow){
    var tp = document.getElementsByClassName('topPlayer');
    for(var i = 0; i < tp.length; i++){
        tp[i].style.display='none'
    }
    document.getElementById(WhoToShow).style.display='block';
}​

UPDATE

我得到的信息是，在做的模拟答案中，getElementsByClassName在IE <9中不起作用，因此我在该答案上添加了一些代码，可能也对此有所帮助。

参见https://stackoverflow.com/a/12386152/600101

Answer 3

document.getElementsByTagName('topPlayer').style.display='none';

这样做...没什么。 topPlayer不是“ TagName”吗？