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

回答

相關問題