Question

如何将第二个DIV转换为点击事件？我现在都在显示它们。我想显示一个然后当你点击它显示第二个和来回。我从来没有使用过HTML或JavaScript，所以请耐心等待。

  <html>
  <head>
     <DIV class="container"><HGROUP>
       <H1>University of Illinois Hospital and Health Sciences</H1>
       <H2>Storage Availability Charts and Graphs</H2></HGROUP><NAV 
       class="navbar"></div>
  <DIV class="container">
      <script type="text/javascript" src="https://www.google.com/jsapi"></script>
      <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
         ['Storage', 'Terabytes'],
         ['Raw',  95],
         ['Usable',  34],

      ]);

      var options = {
        legend: 'none',
        pieSliceText: 'label',
        title: 'EEI VNX5700',
        pieStartAngle: 100,
        is3D: true,
        };

      var chart = new google.visualization.PieChart(document.getElementById('piechart'));
       chart.draw(data, options);
       }
     </script>
  </div>

  <DIV class="container">
     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
     <script type="text/javascript">
        google.load("visualization", "1", {packages:["corechart"]});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
           var data = google.visualization.arrayToDataTable([
           ['Unallocated', 'Used', 'Free'],
           ['Cerner fast pool',  1000,      400],
           ['General fast pool',  1170,      460],
           ['Raid',  970,       644]
       ]);

        var options = {
          title: 'Unallocated',
          vAxis: {title: 'Pools',  titleTextStyle: {color: 'red'}}
       };

        var chart = new  google.visualization.BarChart(document.getElementById('chart_div'));
          chart.draw(data, options);
        }
    </script>
  </div>


  <body>
   <div id="piechart" style="width: 700px; height: 400px;"></div>
  </body>

  <body>
  <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>


  </head>
  </html>

Answer 1

如果你想让他们切换可见度，你应该给他们每个人一个单独的身份。

然后你需要使用javascript（jquery是一种使用javascript的简单方法）

jquery代码看起来像这样

$('#div1').click(function(){
     $('#div2').show();
     $('#div1').hide();
});

$('#div2').click(function(){
     $('#div1').show();
     $('#div2').hide();
});

要使用jquery，请在此处获取库：http://jquery.com/

如果你不想在这里使用jquery是简单的显示/隐藏功能：

<script> 
    function show(id) { 
        if(document.getElementById(id).style.display=='none') { 
            document.getElementById(id).style.display='block'; 
        } 
        return false;
    } 
    function hide(id) { 
        if(document.getElementById(id).style.display=='block') { 
            document.getElementById(id).style.display='none'; 
        } 
        return false;
    }   
</script>

然后只需将这些内容添加到您的div onclick：<div id='div1' onclick='show("div2");hide("div1")'></div>

Answer 2

好的，如果你想在页面加载时隐藏div，你可以做（在jquery中）$('#idOfDiv').hide()然后让div切换你可以做$('#idOfDiv').toggle()现在如果你想要一些东西即使您只需将所有内容都放在

中，也可以使用onClick

$("#secondDiv").hide();
$( "#firstDiv" ).click(function() {
    $('#secondDiv').toggle(); 
});
$( "#secondDiv" ).click(function() {
    $('#firstDiv').toggle(); 
});

示例：http://jsfiddle.net/AFPT2/1/

DIV to onclick事件

2 个答案: