在不重新加载页面的情况下切换 DIV答案

【问题标题】：Toggle DIVs without reloading page在不重新加载页面的情况下切换 DIV
【发布时间】：2016-07-03 12:50:45
【问题描述】：

Pie1 默认显示。单击 Pie2 或 Pie3 的下拉菜单将 DIV 留空，再次选择 Pie1 将返回 echarts_Pie1。我的 pie2 和 pie3 下拉菜单不起作用。

<script language="javascript">
    ivan = {};
    ivan.showhide = function(val1)
    {
      if(val1 == 1)
      {     
        document.getElementById('echart_pie1').style.display = "";
        document.getElementById('echart_pie2').style.display = "none";
        document.getElementById('echart_pie3').style.display = "none";
      }
      else if (val1 == 2)
      {     
        document.getElementById('echart_pie1').style.display = "none";
        document.getElementById('echart_pie2').style.display = "";
        document.getElementById('echart_pie3').style.display = "none";
      }
      else if (val1 == 3)
      {     
        document.getElementById('echart_pie1').style.display = "none";
        document.getElementById('echart_pie2').style.display = "none";
        document.getElementById('echart_pie3').style.display = "";
      }

    }      
    </script>

Pie1 默认显示。单击 Pie2 或 Pie3 的下拉菜单将 DIV 留空，再次选择 Pie1 将返回 echarts_Pie1。我的 pie2 和 pie3 下拉菜单不起作用。

<div class="col-md-3 col-sm-4 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2>Storage</h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                        <ul class="dropdown-menu" role="menu">
                         <option onclick="ivan.showhide(1)">Pie1</option>
                         <option onclick="ivan.showhide(2)">Pie2</option>
                          <option onclick="ivan.showhide(3)">Pie3</option>
                          </ul>
                      </li>
                      <li><a class="close-link"><i class="fa fa-close"></i></a>
                      </li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
                        <div id="echart_pie1" style="height:180px;"></div>
                        <div id="echart_pie2" style="height:180px; display:none;"></div>
                        <div id="echart_pie3" style="height:180px; display:none;"></div>                           

                  </div>

【问题讨论】：

echart_pie2有什么内容？您提供的 HTML 没有任何内容，因此我假设您有为其提供内容的脚本。您能否将该脚本添加到问题中或解释该元素如何获取其内容？
请注意，option 元素不允许作为 ul 元素的子元素出现。允许的父母是optgroup, select, or datalist。
这一定是我渲染需要重新生成的图形的方式，
我听不懂你在说什么？
@trincot 页面加载时，我在 div 上使用 display:none，我认为它需要重新生成要显示的图形。我可能不得不隐藏起来，但是然后divs堆叠在彼此的下方。默认图形加载，但是当我选择其他图形时- div 是空白的。我需要一个加载所有 3 个图形的函数，然后将 2 设置为隐藏。只是不确定这是否是正确的方法，或者 tbh - 如何做到这一点。

标签： javascript html echarts

【解决方案1】：

this 是您正在搜索的结果吗？

HTML：

<ul role="menu">
                     <option onclick="ivan.showhide(1)">Pie1</option>
                     <option onclick="ivan.showhide(2)">Pie2</option>
                      <option onclick="ivan.showhide(3)">Pie3</option>
                      </ul>
                        <div id="echart_pie1" style="height:180px;">a</div>
                    <div id="echart_pie2" style="height:180px; display:none;">b</div>
                    <div id="echart_pie3" style="height:180px; display:none;">c</div>

JS：

ivan = {};
ivan.showhide = function(val1)
{
  if(val1 == 1)
  {     
    document.getElementById('echart_pie1').style.display = "";
    document.getElementById('echart_pie2').style.display = "none";
    document.getElementById('echart_pie3').style.display = "none";
  }
  else if (val1 == 2)
  {     
    document.getElementById('echart_pie1').style.display = "none";
    document.getElementById('echart_pie2').style.display = "";
    document.getElementById('echart_pie3').style.display = "none";
  }
  else if (val1 == 3)
  {     
    document.getElementById('echart_pie1').style.display = "none";
    document.getElementById('echart_pie2').style.display = "none";
    document.getElementById('echart_pie3').style.display = "";
  }

}

实际上我什至没有改变任何东西，除了你的 DIV 中的内容（我使用了 a、b 和 c）。如果结果符合您的预期，则此方法有效。

【讨论】：

不，这不起作用，默认情况下我仍然看到 Pie1 - 选择 pie2 或 pie3 会使我的 div 空白。变回 pie1 后再次选择 pie1。似乎 pie2 和 pie3 因为 display:none 而没有生成

【解决方案2】：

echarts 库可能需要容器在生成图形的过程中可见，所以我建议从 HTML 中删除 display:none 样式：

<ul role="menu">
  <option onclick="ivan.showhide(1)">Pie1</option>
  <option onclick="ivan.showhide(2)">Pie2</option>
  <option onclick="ivan.showhide(3)">Pie3</option>
</ul>
<div id="echart_pie1" style="height:180px;"></div>
<div id="echart_pie2" style="height:180px;"></div>
<div id="echart_pie3" style="height:180px;"></div>

在 JavaScript 代码中，您有初始化图形的代码，调用如下：

var echartPie1 = echarts.init(document.getElementById('echart_pie1'), theme); 
// ... etc

在该代码之后，添加以下行：

ivan.showhide(1);

这当然假设您此时已经定义了ivan。如果不是，请先放该定义，然后在其下方添加上述行。

简化

与问题无关，但请注意，您可以将showhide 函数简化为：

ivan = {};
ivan.showhide = function(val1)
{
    document.getElementById('echart_pie1').style.display = val1 !== 1 ? "none" : "";
    document.getElementById('echart_pie2').style.display = val1 !== 2 ? "none" : "";
    document.getElementById('echart_pie3').style.display = val1 !== 3 ? "none" : "";
}

如果所有三个图表在页面加载时都闪烁

当页面加载时，页面可能会在几分之一秒内显示所有三个图表。如果这是一个问题，试试这个，虽然它可能会带回原来的问题：

将样式visibility: hidden添加到ul标签：
```
<ul role="menu" style="visibility: hidden">
```

调用showhide(1)后删除该样式：

 ivan.showhide(1);
 document.querySelector('ul[role=menu]').style.visibility = 'visible';

【讨论】：

【解决方案3】：

使用 ECharts 初始化时 <div> 是否可见并不重要。重要的是它应该具有作为容器的宽度和高度。

因此，您可以在页面加载时使用所有三个图表设置它们，无论哪一个可见。

document.getElementById('echart_pie1').style.width = '800px';
document.getElementById('echart_pie1').style.height = '600px';

document.getElementById('echart_pie2').style.width = '800px';
document.getElementById('echart_pie2').style.height = '600px';

document.getElementById('echart_pie3').style.width = '800px';
document.getElementById('echart_pie3').style.height = '600px';

【讨论】：

【解决方案4】：

onclick 功能在选项元素中不起作用！所以试着稍微改变一下你的选项格式

<select class="dropdown-menu" role="menu" onchange="ivan.showhide(this.value)">
              <option value="1">Pie1</option>
              <option value="2">Pie2</option>
              <option value="3">Pie3</option>
</select>

【讨论】：

【解决方案5】：

感谢大家的帮助。它现在可以工作了——我使用 pie1a、pie1b、pie1c 对其进行了测试。

<script type="text/javascript">
    function doLoadStuff()
    {
        document.getElementById('echart_pie1b').style.display = "none";
        document.getElementById('echart_pie1c').style.display = "none";
    }
</script>

HTML

<body class="nav-md" onload="doLoadStuff()">

...

<ul class="dropdown-menu" role="menu">
    <option onclick="showhidePie1('a')">Pie1a</option>
    <option onclick="showhidePie1('b')">Pie1b</option>
    <option onclick="showhidePie1('c')">Pie1c</option>
</ul>


<div id="echart_pie1a" style="height:200px;"></div>
<div id="echart_pie1b" style="height:200px;"></div>
<div id="echart_pie1c" style="height:200px;"></div>

然后我在底部脚本中初始化了我的 3 个饼图

var echartBar1a = echarts.init(document.getElementById('echart_bar1a'), theme);

    echartBar1a.setOption(
                         {
                           Options...
                         }

然后用一个函数来设置样式。

function showhidePie1(theChar) {
    document.getElementById('echart_pie1a').style.display = "none";
    document.getElementById('echart_pie1b').style.display = "none";
    document.getElementById('echart_pie1c').style.display = "none";

    document.getElementById('echart_pie1'+theChar).style.display = "";      
}

它现在运行良好。谢谢。

【讨论】：