2

请在此处找到代码

min我在按钮单击时切换一个类。为了显示这一点，颜色被切换。有没有办法给按钮添加一个图标，例如在:icon-double-angle-right和 icon-double-angle-left. 我链接了 Font-Awesome CDN。我只关心最近的浏览器，所以主要寻找基于伪元素的sol。

4

4 回答 4

3

您可以使用伪属性来实现这一点：

CSS：

btn.min { background:red; }
.btn:after {
  content: attr(data-active-icon);
  font-family: 'FontAwesome';
}
.btn.min:after {
  content: attr(data-inactive-icon);
  font-family: 'FontAwesome';
}

HTML：

<button class="btn" ng-class="{min: min}" ng-click="toggle()" data-active-icon='&#xf104;' data-inactive-icon='&#xf105;'></button>

你的data-active-icon和data-inactive-icon取自这张表。

演示：http: //jsbin.com/ariwij/1/edit

我没有在演示中包含引导程序，但它会很好地集成。

于 2013-05-07T14:05:14.897 回答
0

使您的 HTML 像这样：<button class="btn" ng-class="{min: min}" ng-click="toggle()"><span class="arrow-left"></span></button>

Then use javascript or jquery to replace the class on the <span> with a different class on toggle. Then make your two CSS class rules, one with background image for your left facing arrow, one for your right facing arrow, or whatever the stylistic thing it is you want to achieve.

于 2013-05-07T13:42:06.930 回答
0

考虑您的按钮是#butt：

$("#butt").click(function(){
     $(this).toggle('red');
})

和 CSS：

.red{
 color:red;
}
于 2013-05-07T13:48:16.393 回答
0

要通过类切换图标，请查看此处： https ://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_like_dislike

于 2021-08-19T17:41:43.840 回答