个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我是 angularJS 的新手。我想要的是，我有一些社交链接图标和文本框。默认情况下选择 linkedin 图标。当我点击 facebook 图标时，它的颜色应该变成蓝色背景，带有 facebook 链接的文本框也应该改变，linkedin 背景应该和其他图标一样灰色。
如何使用angularjs实现？
任何帮助都会很棒。
谢谢。
app.controller('SocialIconController', function($scope) {
$scope.option = "linkedin";
$scope.social_toggle = false;
});.exhibitor_social_icon {
background: #d7d6d6;
height: 20px;
width: 20px;
padding: 5px 10px 5px;
margin: 0 3px;
cursor: pointer;
}
.linked_in_bg_color {
background: #0077B5;
width: auto;
border: thin white solid;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="">
<div class="form-group margin_top_20" ng-controller="SocialIconController">
<label class="col-md-2 col-sm-2 col-xs-12 control-label set_padding_0">Social Link</label>
<div class="col-md-10 col-sm-10 col-xs-10 set_padding_0">
<span class="exhibitor_social_icon linked_in_bg_color margin_left_0" ng-click="social_toggle = !social_toggle" ng-class="{exhibitor_social_icon : !social_toggle, linked_in_bg_color : social_toggle}">
<i class="fa fa-linkedin text-white"></i>
</span>
<span class="exhibitor_social_icon" ng-click="social_toggle = !social_toggle" ng-class="{exhibitor_social_icon : !social_toggle, linked_in_bg_color : social_toggle}">
<i class="fa fa-facebook text-white" ></i>
</span>
<span class="exhibitor_social_icon">
<i class="fa fa-twitter text-white" ></i>
</span>
<input class="form-control margin_top_4" placeholder="www.linkedin.com/example" type="text" ng-show="!social_toggle">
<input class="form-control margin_top_4" placeholder="www.facebook.com/example" type="text" ng-show="social_toggle">
</div>
</div>
</div>stackoverflow 代码编辑器默认有两个文本框，默认情况下应该只有一个。
这里是 JSFiddle
最佳答案
试试这个:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa{color:#333;background:gray;}
.selected{color:red;background:blue;}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<i id="icon1" class="fa fa-bandcamp" aria-hidden="true" ng-class="{'selected':icon == 'icon1'} " ng-click="click('icon1')"></i><br/>
<i id="icon2" class="fa fa-bandcamp" aria-hidden="true" ng-class="{'selected':icon == 'icon2'} " ng-click="click('icon2')"></i><br/>
<i id="icon3" class="fa fa-bandcamp" aria-hidden="true" ng-class="{'selected':icon == 'icon3'} " ng-click="click('icon3')"></i>
<script>
//module declaration
var app = angular.module('myApp',[]);
//controller declaration
app.controller('myCtrl',function($scope){
$scope.icon = "icon1";
$scope.click = function(item){
$scope.icon = item;
}
});
</script>
</body>
</html>
关于javascript - Angular : change font awsome icon color and background on click，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41034333/
25
4
0
我正在开发一个 Android 项目，其中有一个抽屉导航，其中显示了 GroupSection 对象的列表。所有 GroupSection 对象都包含一个部分图标。抽屉图标由 TypedArray 和
$('a[class*=icon-]').append(""); 使用我现在拥有的代码，我可以转动: 进入 但我想将选定的类“icon-edit”附加到跨度类中。因为我想要这样的东西: var
我正在建立一个网站，我希望在视觉上有一排字体很棒的图标看起来具有相同的高度。这也意味着我希望他们都坐在同一基线上。 由于图标的性质是具有不同纵横比的不同形状，当您将具有相同字体大小或 fa-2x(等)
我有两个图标，其中一个图标为 .gif，另一个图标为 .png。所以我想组合这些图标，将动画图标放在另一个图标之上。 此代码适用于静态图标，但在放置动画图标时，它不会打印动画。 public clas
当我在控制台中运行 gatsby develop 时，会出现此错误: ERROR #11331 PLUGIN Invalid plugin options for "gatsby-plugin-ma
在适用于iPhone的iOS 7上，有一个新的应用程序图标大小:120x120。我使用此尺寸来创建iOS 7专用图标。在iOS 6上，它将自动采用“旧” 114x114图标，在iOS 7上，它将采用新
我的简单问题是:是否可以将图标组件内的文本居中，我尝试像 child 一样传递文本，但它不起作用？还有其他解决方案吗？我知道可能的解决方案是使用 position: 'absolute' 但还有其他方
我有这个代码: if(seatE1.getIcon() == particular icon) { // do something } 我不知道在特定图标中写什么。我应该写我想要的图标的路径还
在调用 System.Drawing.Icon.ToBitmap() 创建图像后，是否可以安全地处理原始 Icon？ 最佳答案 该方法将 Icon 转换为新的 Bitmap 对象，因此不会有从 Bit
这个图钉图标的名称是什么？ 最佳答案 现在 Material Icon 中提供了准确的图标。 图标名称:push_pin 图标网址:https://material.io/resources/icon
数据如下: df % ggplot(aes(label = parts, values = values)) + geom_pictogram(n_rows = 10, aes(color =
我正在为 VSCode 编写扩展。在 WebviewPanel 中，我需要显示来自文件图标主题的文件扩展名图标。是否有从文件图标主题中获取图标的功能？ 最佳答案 我也在研究这个。我还没有答案，但到目前
我正在组装一个通用应用程序，并且我的项目中有图标，但是我不断从编译器收到关于Icon.png的警告。 我按照http://developer.apple.com/library/ios/#qa/qa2
我正在组装一个通用应用程序，并且我的项目中有图标，但是我不断从编译器收到有关Icon.png的警告。 我按照http://developer.apple.com/library/ios/#qa/qa2
我下载了“Office 2010 Add-In: Icons Gallery ”，这是一个 docx 文件，其中有两个包含图标的后台选项卡。 如何提取图标或在我的应用程序中使用它们？ 最佳答案 我在
我正在开发一个 MacOS 应用程序，该应用程序应显示应用程序图标。对于某些应用程序，它可以工作，对于某些应用程序，它不能。 Notes.app 是我没有获得应用程序图标图像的应用程序。 let ic
我只是在Android Studio中创建了一个模板项目，我没有更改一行代码(DrawerLayout模板项目)。 但是，我发现用于显示导航 fragment 的单击图标始终是向左箭头，即使在代码中它
我正在尝试找出如何使用 xpath 通配符来获取网站图标: $doc = new DOMDocument(); $doc->strictErrorChecking = FALSE; $doc->loa
Mobile Safari对于比传统 16x16 分辨率更高的图标，需要使用以下咒语: 但是，Firefox 需要使用 HTML5 syntax ，例如: 现在，我的期望是可以将它们组合成一行
我目前为动态创建的 QPushButton 使用以下样式表属性 string mystyle = "QPushButton { border: 1px solid #8f8f91; border-
我是一名优秀的程序员,十分优秀！