您如何使Div像按钮一样做同样的事情？

Question

I am trying to make a navigation bar for a project and I need a button to call the function for a dropdown menu. If I have a button, I can't format it the same as a div, and it stands out from the other options. Is there a way to make a div be a button? I have tried putting the onclick attribute on it, but then the drop-down menu doesn't appear in the same spot. Thanks in advance.

(I am very new to coding, so try to explain things in simple terms)

I decided to do a hover drop-down menu which makes things a lot easier, but thank you for your answers!

Answer 1

You say you are very new to coding. Have you read about jquery at all? I would definitely suggest it. It is very possible to make things happen when a <div> tag is clicked with jquery functions. Here is an example:

$("#IdOfDivTag").click(function(){
    alert("The paragraph was clicked.");
});

You will have to add an id or class attribute to the div tag you want an action to happen with (unless you want the same action for all <div> , in which case you can use "div" in the jquery statement).

To implement jquery you need at add a jquery library to your code... You can start here: http://www.w3schools.com/jquery/jquery_get_started.asp

Answer 2

There are different ways to do this. One is to use jQuery (a Javascript extension), like Branden Keck showed it to you. Another way is to use only html and Javascript: There is a html attribute which creates an Javascript event:

<div id="myDiv" onclick="clickEvent()">Some text</div>

clickEvent has to have brackets in it because it's a Javascript Function. Your Javascript could look like something like this then:

function clickEvent() {
document.getElementById("myDiv").innerHTML = "Hello World";
}

Here a snippet for that:

 function myFunction() { document.getElementById("myDiv").innerHTML = "Hello World without jQuery!"; } $("#myDiv2").click(function() { $("#myDiv2").html("Hello World with jQuery!"); }); $("#myDiv3").click(function() { $("#hiddenDiv").slideToggle(750); // 750 is the sliding time in ms }); 

 #myDiv, #myDiv2, #myDiv3, #hiddenDiv { background: #0000ff; color: #ffffff; transition: 0.5s all; -webkit-transition: 0.5 all; font-family: "Arial"; width: auto; height: auto; font-size: 1.3em; margin: 0.4em; padding: 0.2em; border-left: 1px groove #f0f0f0; border-top: 1px groove #f0f0f0; } #myDiv:hover, #myDiv2:hover, #myDiv3:hover { background: #ffffff; color: #000000; padding: 0.22em; box-shadow: 0.22em 0.22em 0.44em #000000; } #myDiv2, #myDiv3 { background: #ff0000; } #hiddenDiv { background: #00aa00; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <div id="myDiv" onclick="myFunction()">Click this div! Without jQuery</div> <div id="myDiv2">Click this div! With jQuery</div> <div id="myDiv3">Toggle hidden Text With jQuery<span style="font-size: 0.7em;font-family:Arial;font-style:italic;"> May lag because of snippet.</span></div> <div id="hiddenDiv">You found me!</div>