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实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...
随机推荐
- php 可变函数
//可变函数 function Test(){ $arr = func_get_args(); //获取所有参数 ,返回数组 $sum=0; for($i ...
- (cljs/run-at (->JSVM :browser) "语言基础")
前言 两年多前知道cljs的存在时十分兴奋,但因为工作中根本用不上,国内也没有专门的职位于是搁置了对其的探索.而近一两年来又刮起了函数式编程的风潮,恰逢有幸主理新项目的前端架构,于是引入Ramda. ...
- Angular JS的Placeholder功能在IE8/9浏览器中不可用
附上如下代码可正常工作: .directive('placeholder', function($timeout){ var i = document.createElement('input'); ...
- w3c编程挑战-初级脚本算法
之前偶然看到了w3c上的编程挑战题,就像拿来试试手,先做的是初级脚本算法,总体不难,如果有更好的方法,希望能一起交流! 1.翻转字符串 先把字符串转化成数组,再借助数组的reverse方法翻转数组顺序 ...
- 原生js在绑定事件时不用获取id名可直接用id名绑定???
<div id="btn"> 点击 </div> <script> btn.onclick=function(){ console.log(bt ...
- js模版引擎开发实战以及对eval函数的改进
简介 前段时间,想着自己写一个简单的模版引擎,便于自己平时开发demo时使用,同时也算是之前学习的知识的一种总结吧! 首先我们先了解一下模版引擎的工作原理吧! 1. 模版引擎其实就是将指定标签的内容根 ...
- unity3d项目导入android studio
第一步 拿到unity3d项目,里面包含以下文件 第二步 在android studio下新建一个project 第三步 将unity3d项目目录下的libs下的jar文件复制黏贴到android s ...
- Linux下如何启动svn服务器
service svnserve start 启动服务 service svnserve stop 停止服务 service svnserve restart 重启服务 rpm -e --nodeps ...
- 5.Smart使用内置函数或者自定义函数
1.使用内置函数 例如使用date函数 {"Y-m-d"|date:$time}格式{第一个参数|方法:第二个参数:第三个参数}即可转换成 2016-07-19 2.使用resi ...
- webpackage 2.x 使用
webpackage 2.x 使用 安装---(在项目目录下) //1.初始化npm的配置(添加package.json) npm init //2.安装 webpackage npm install ...