Javascript onclick-won'；不要让我将div display设置为hidden，将另一个设置为inline，当hidden注释掉时，inline只工作一次

我试着在谷歌上搜索这个，但没有什么像我遇到的问题，所以我相当肯定这不是一个重复的主题

我有3个div，我试图隐藏2个div，并使用JavaScript显示一个div。它不应该像我以前做过很多次那样复杂，但它让我发疯

下面是我的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>

奇怪的是，如果我注释掉函数中除警报之外的所有内容，它会一直按预期工作，如果我注释掉除

document.getElementById（whotshow）.style.display='inline'

之外的所有内容，它只工作一次，然后如果我离开

document.getElementById（whotshow），链接就不可链接.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";
}

这在第一次点击时非常有效，然后在任何进一步的点击时都不会发生任何变化。我唯一能想到的另一件可能会产生影响的事情是，php代码只是呼应出一个已发布的google doc graph 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"
}


{
“数据源URL”：“//docs.google.com/spreadsheet/tq？key=0amogec58wcdfjzuvkymmj1dtbqxzvuqmxlc3f0uke&transpose=1&headers=1&range=A1%3AB100&gid=1&pub=1”，
“选择”：{
“VAX”：{
"1": {
“useFormatFromData”：true
},
"0": {
“useFormatFromData”：true
}
},
“头衔”：“女子二队”，
“布尔角色”：“确定性”，
“动画”：{
“持续时间”：0
},
“哈克斯”：{
“标题”：“目标数量”，
“useFormatFromData”：true，
“viewWindowMode”：“漂亮”，
“视图窗口”：{}
},
“isStacked”：错误，
“宽度”：600，
“高度”：371
},
“国家”：{}，
“图表类型”：“条形图”，
“图表名称”：“图表3”
}


我真的很感激任何人能提供的任何帮助或建议，因为我已经准备好用笔记本电脑发泄我的沮丧

解决（有点）
因此，我能够在谷歌生成的脚本中找到问题的根源，我用图像图表替换了交互式图表脚本，并按预期工作，不幸的是，我无法让它与交互式图表一起工作更新的答案！用数字重命名div，然后用循环遍历它们，只显示所选的div

示例：
更新的答案！用数字重命名div，然后用循环遍历它们，只显示所选的div

示例：
您使用了
getElementsByTagName
而不是
getElementsByClassName
。它返回一个我们需要循环的元素数组

HTML


男式上衣
女子第一
女子第二
​

Javascript

var getTopPlayer=函数（whotshow）{
var tp=document.getElementsByClassName（'topPlayer'）；
对于（变量i=0；i

更新

在一个模拟答案中，我得到了GetElementsByCassName在IE<9中不起作用的信息，所以我在这个答案上添加了一些代码，这可能对这个答案也有帮助

请参见您使用了
getElementsByTagName
而不是
getElementsByClassName
。它返回一个我们需要循环的元素数组

HTML


男式上衣
女子第一
女子第二
​

Javascript

var getTopPlayer=函数（whotshow）{
var tp=document.getElementsByClassName（'topPlayer'）；
对于（变量i=0；i

更新

在一个模拟答案中，我得到了GetElementsByCassName在IE<9中不起作用的信息，所以我在这个答案上添加了一些代码，这可能对这个答案也有帮助

看

这是。。。没什么<代码>顶层

不是“标记名”，是吗

---

这是。。。没什么

topPlayer

不是“标记名”，是吗？

稍微编辑了一下脚本，并删除了

wts

，因为它是调试的残余。谢谢Henrik的建议，但恐怕没有任何效果，我可以问一下返回false的目的是什么，以及为什么您将函数分配给var而不是直接调用它吗？在上面的场景中，该代码对我来说是一个魅力。如果它在那里工作，但不在代码中，那么代码中还有其他问题。就像从PHP输出的图表javascript一样。首先调用

.js

文件，在同一

块中，以

{

。没有函数调用或什么都没有。关于

返回false

，我注意到

标记没有使用

href

，因此无效。因此添加了

#

，但是

onclick

需要

返回false

不调用

href

。关于

var getTopPlayer=function>这更像是一种偏好。因此我得出结论，这是谷歌脚本的问题。我没有写这篇文章，因为它是由谷歌电子表格生成的。我无法用交互式图表解决它，所以我只使用了图像版本，效果很好。至于
{s
我以前从未使用过类似的js脚本，所以我也没有得到它。感谢HenrikYou的帮助
<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"
}

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