你如何让 Div 做和按钮一样的事情？答案

【问题标题】：How do you make a Div do the same thing as a a button?你如何让 Div 做和按钮一样的事情？
【发布时间】：2016-03-17 18:36:55
【问题描述】：

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

（我对编码很陌生，所以尽量用简单的术语来解释）

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

【问题讨论】：

请提供您拥有的所有相关代码。
每个元素最终都可以像任何其他元素一样设置样式... :) 所以是的，请提供代码。点击处理程序是关键。

标签： html button menu dropdown

【解决方案1】：

你说你对编码很陌生。你读过jquery吗？我肯定会建议它。当使用 jquery 函数单击 <div> 标记时，很有可能发生这种情况。这是一个例子：

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

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

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

【讨论】：

【解决方案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";
}

这里有一个sn-p：

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>

【讨论】：