0

我正在关注一本 pdf 书来学习 jQuery。下面的代码应该根据本书创建 2 个按钮，但在我的例子中，它只是创建它的简单文本而不是按钮。我重新检查了这本书，看看我是否遗漏了什么。

我是新手，所以这对你们专家来说似乎是一个愚蠢的问题。

代码：

 <div id="switcher">
<div class="label">Style Switcher</div>
<div class="button" id="switcher-large">Increase Text Size</div>
<div class="button" id="switcher-small">Decrease Text size</div>
</div>

提前致谢。

4

4 回答 4

1

你必须自己让它“看起来”像一个按钮。最简单的方法显然是通过 CSS。

.button {
background-color:red;
width:100px;
height:30px;
color:white;
padding:4px;
margin:10px;
}
.button:hover {
font-weight:bold;
cursor:pointer;
}

这可能是一种非常基本的做事方式。

于 2012-08-08T12:27:09.310 回答
1

您只是在 div 标签上为他们提供类属性。按钮是由按钮标签创建的。这是你如何做到的。

<div id="switcher">
    <div class="label">Style Switcher</div>
    <button class="button" id="switcher-large">Increase Text Size</button>
    <button class="button" id="switcher-small">Decrease Text size</button>
</div>
于 2012-08-08T12:27:51.913 回答
0

如果您使用的是 jquery UI，那么您需要通过 javascript 应用按钮：

$(".button").button();
于 2012-08-08T12:30:06.670 回答
0

通过 jQuery，该wrapInner函数可以将文本转换为按钮，如果这是您需要的：

您的 HTML：

<div id="switcher">
  <div class="label">Style Switcher</div>
  <div class="button" id="switcher-large">Increase Text Size</div>
  <div class="button" id="switcher-small">Decrease Text size</div>
</div>

jQuery：

jQuery(document).ready(function(){

  $('.button').wrapInner('<button />');

});

当然，您需要添加更多内容 - 一些onClick要执行的事件，您打算执行的操作，或者可能是在单击按钮时执行的其他一些 jQuery，例如$(button').on("click",function() {...

http://api.jquery.com/wrapInner/

于 2012-08-08T12:34:43.890 回答