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

时间：2016-07-03 12:50:45

标签： javascript html5 echarts

默认情况下显示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>

5 个答案:

答案 0 :(得分：0)

结果是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）。如果它是你期望的结果，这是有效的。

答案 1 :(得分：0)

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

答案 2 :(得分：0)

使用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';

答案 3 :(得分：0)

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>

答案 4 :(得分：0)

谢谢大家的协助。它现在正在工作 - 我使用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 = "";      
}

它现在完美运作。谢谢。

相关问题
最新问题