0

我试过在谷歌和这里搜索这个，但没有像我遇到的问题那样出现，所以我相当肯定这不是一个重复的主题。

我有 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'It works ONCE 之外的所有内容，然后链接不可点击，如果我不加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";
}

这在第一次点击时完美运行，然后在任何进一步的点击时发生。我能想到的唯一可能会产生影响的事情是 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"
}

我非常感谢任何人可以提供的任何帮助或建议，因为我已经准备好在我的笔记本电脑上消除我的挫败感。

已解决（有点）

所以我能够找到问题的根源到谷歌生成的脚本，我用图像图表替换了交互式图表脚本，并且按预期工作，不幸的是我无法让它与交互式图表一起使用

4

3 回答 3

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';
}​

更新

我得到了 getElementsByClassName 在 IE < 9 中不起作用的信息，我做了一个类似的答案，所以我在那个答案上添加了一些代码，这也可能有助于这个答案。

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

于 2012-09-10T21:29:51.127 回答
2

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

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

于 2012-09-10T21:26:56.307 回答
0 
document.getElementsByTagName('topPlayer').style.display='none';

这确实……没什么。topPlayer不是一个“TagName”吗？

于 2012-09-10T21:30:30.833 回答