DIV到onclick事件

如何使第二个DIV进入点击事件？我现在都把它们都显示出来。我想显示一个，然后当你点击它显示第二个和来回。我从来没有使用HTML或JavaScript之前，所以忍受着我。DIV到onclick事件

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

来源

2014-01-10 mike smith

*“？我怎样才能让第二DIV到上点击事件” *我认为你的意思是你想**绑定一个事件处理程序到元素？因为不能将DOM元素转换为事件，所以两者完全不同。如果你想了解事件处理，我建议阅读http://www.quirksmode.org/js/introevents.html。 –

您的html标记不正确。例如，一个[html-page只能有1个'body'-Element]（http://www.w3.org/TR/html5/sections.html#the-body-element），通常在head元素之后。您的代码看起来像您正在使用[Google Charts（Pie Chart）]（https://developers.google.com/chart/interactive/docs/gallery/piechart?csw=1）。但是你没有提到它们的使用如何与你的问题一起玩。你能澄清你的问题吗？你对HTML和JavaScript了解多少？ – surfmuggle

是的，我正在使用谷歌图表，我试图显示一个图表，然后显示另一个具有更多细节和来回。我不太了解HTML和JavaScript。我在网上学习一个教程，但我没有得到我可以做到这一点的地方。感谢大家的帮助。 –

-1

好吧，如果你想一个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/

来源

2014-01-10 22:32:58 tec4

从'javascript'标记描述：*“除非包含框架/库的标记也包含在内，否则预计会得到纯JavaScript的答案。”*。 –

谢谢@tcordero，如果你不介意你能不能介绍你的例子中所有的东西都会合适的。谢谢大家的帮助，非常感谢。 –

@mikesmith好吧我更新了jsfiddle http://jsfiddle.net/AFPT2/2/ =） – tec4

如果你希望他们切换可见性，你应该给他们每个单独的ID。

然后，你将需要使用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>

来源

2014-01-10 22:31:28 frosty11x

从'javascript'标记描述：*“除非包含框架/库的标记也包含在内，否则预计会有纯JavaScript的答案。”*。此外，*“jQuery是一个简单的方法来做JavaScript”*是不完全正确的。 jQuery使得使用DOM更容易，但不是JavaScript。 –

DIV到onclick事件

回答

相关问题