Angular页面选项卡切换要注意的toggleClass
在第一,第二篇随笔中写到的选项卡切换,我回头看了看发现缺少了一个很重要的部分,那就是toggleClass。
//在js控制器中必须写明指令,要不然在页面写了toggle-class=“active”也是会报错的!!!
.directive('toggleClass', function(){
return {
restrict: 'A',
scope: {
toggleClass: '@'
},
link: function(scope, element,attrs){
element.on('click', function(){
element.parent().children().removeClass(scope.toggleClass);
element.addClass(scope.toggleClass);
});
}
};
})
Angular页面选项卡切换要注意的toggleClass的更多相关文章
- MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换
概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...
- 使用ViewPager+Fragment实现选项卡切换效果
实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果
利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼 ...
- 7、JavaScript总结——实现选项卡切换的效果
编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 ...
- 用js实现选项卡切换效果
这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --><ul class="tab_menu"> <li class=&quo ...
- js选项卡切换效果
选项卡切换在页面中比较常见,这里是我利用js闭包还有setTimeout定时器实现的一个比较实用的选项卡功能. <!DOCTYPE html> <html lang="en ...
- 使用jquery实现选项卡切换效果
几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...
- mui底部选项卡切换实现
MUI提供了两种webview和div模式,来实现底部选项卡切换 效果相同,div是在同一个页面实现所有切换块的页面,根据id导航,而webview是由多个页面组成,形成页面之间的来回跳转
- 用html+css+js实现选项卡切换效果
文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...
随机推荐
- 浅谈JavaScript递归
递归:是指函数/过程/子程序在运行过程序中直接或间接调用自身而产生的重入现象.递归指的是一个过程:函数不断引用自身,直到引用的对象已知. //公园里面有200个桃子,每天吃掉一半,扔掉一个烂的,第6天 ...
- springmvc 之 SpringMVC视图解析器
当我们对SpringMVC控制的资源发起请求时,这些请求都会被SpringMVC的DispatcherServlet处理,接着Spring会分析看哪一个HandlerMapping定义的所有请求映射中 ...
- Overfitting&Underfitting Problems
这次根据结合Google的翻译果然速度快上许多,暂时休息,晚上在传一个exm2的随笔. 关于过度拟合下的问题 考虑从x∈R预测y的问题,下面的最左边的图显示了将\(y=\theta_0+\theta_ ...
- IE6不支持position:fixed的解决方法
解决IE6不支持position:fixed的方法,非常简单,具体调用请参考下面: /*让position:fixed在IE6下可用! */ .fixed-top /* 头部固定 */{positio ...
- [leetcode-532-K-diff Pairs in an Array]
Given an array of integers and an integer k, you need to find the number of unique k-diff pairs in t ...
- 【LeetCode】206. Reverse Linked List
题目: Reverse a singly linked list. 提示: 此题不难,可以用迭代或者递归两种方法求解.记得要把原来的链表头的next置为NULL: 代码: 迭代: /** * Defi ...
- 不错的 HttpHelper类 c#
/// <summary>/// 类说明:HttpHelper类,用来实现Http访问,Post或者Get方式的,直接访问,带Cookie的,带证书的等方式,可以设置代理/// 重要提示: ...
- Android高仿qq及微信底部菜单的几种实现方式
最近项目没那么忙,想着开发app的话,有很多都是重复,既然是重复的,那就没有必要每次都去写,所以就想着写一个app通用的基本框架,这里说的框架不是什么MVC,MVP,MVVM这种,而是app开发的通用 ...
- 简单粗暴的在vmware虚拟机中固定ip
虚拟机对于很多做测试的或者在学习测试中的人来说是位常客,经常会用到,但是虚拟机重启之后,很多人遇到虚拟机ip变化,很是头痛,我在学习过程中也遇到了这个问题,百度了很多办法,有些办法对于网络知识小白来说 ...
- 为实体类增加toJSON方法
后期子类继承该基础类即可. package com.lichmama.test; import java.io.Serializable; import java.lang.reflect.Field ...