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

Question

我正在尝试为项目创建导航栏，并且需要一个按钮来调用下拉菜单的功能。 如果有按钮，则无法将其格式化为与div相同的格式，并且它在其他选项中脱颖而出。 有没有一种方法可以使div成为按钮？ 我尝试过在其上放置onclick属性，但是下拉菜单没有出现在同一位置。 提前致谢。

（我对编码非常陌生，因此请尝试用简单的术语进行解释）

我决定做一个悬停下拉菜单，它使事情变得容易得多，但是感谢您的回答！

Answer 1

您说您对编码非常陌生。 您是否完全了解jquery？ 我肯定会建议。 当用jquery函数单击<div>标记时，很有可能使事情发生。 这是一个例子：

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

您将必须向要执行操作的div标签添加id或class属性（除非您希望对所有<div>使用相同的操作，在这种情况下，您可以在jquery语句中使用“ div”）。

要实现jquery，您需要在代码中添加jquery库...您可以从此处开始： http : //www.w3schools.com/jquery/jquery_get_started.asp

Answer 2

有不同的方法可以做到这一点。 一种是使用jQuery（JavaScript扩展），就像Branden Keck向您展示的那样。 另一种方法是仅使用html和Javascript：有一个html属性创建一个Javascript事件：

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

clickEvent必须带有方括号，因为它是Javascript函数。 您的Javascript可能看起来像这样：

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

这是一个片段：

 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>