在第一,第二篇随笔中写到的选项卡切换,我回头看了看发现缺少了一个很重要的部分,那就是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的更多相关文章

  1. MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换

      概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...

  2. 使用ViewPager+Fragment实现选项卡切换效果

    实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...

  3. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

  4. 7、JavaScript总结——实现选项卡切换的效果

    编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居    200万内购五环三居 140万安家东三环 ...

  5. 用js实现选项卡切换效果

    这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --><ul class="tab_menu"> <li class=&quo ...

  6. js选项卡切换效果

    选项卡切换在页面中比较常见,这里是我利用js闭包还有setTimeout定时器实现的一个比较实用的选项卡功能. <!DOCTYPE html> <html lang="en ...

  7. 使用jquery实现选项卡切换效果

    几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...

  8. mui底部选项卡切换实现

    MUI提供了两种webview和div模式,来实现底部选项卡切换 效果相同,div是在同一个页面实现所有切换块的页面,根据id导航,而webview是由多个页面组成,形成页面之间的来回跳转

  9. 用html+css+js实现选项卡切换效果

    文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...

随机推荐

  1. MYSQL更改root password时遇到Access Denied的解决办法

    今天在公司虚拟机上装MYSQL之后需要修改root password,然而遇到这样的错误: Access denied for user 'root'@'localhost' (using passw ...

  2. Nignx入门location、root配置

    nginx的配置.首当其冲的就是location配置了,下面是笔记参考的博文链接 http://www.cnblogs.com/sunkeydev/p/5225051.html   location匹 ...

  3. 安装nginx+lua开发环境

    一.安装nginx及搭建本地测试环境 1.创建安装目录:    /data/nginx2.安装make:        yum-y install gcc automake autoconf libt ...

  4. 查找oracle自己用户的表

    查找oracle自己用户的表 select table_name from user_tables;

  5. Example006为弹出窗口加入关闭按钮

    <!-- 实例006为弹出的窗口加入关闭按钮 --> <head> <meta charset="UTF-8"> </head> & ...

  6. pdf文件之itextpdf操作实例

    需求分析 1.需要创建一个pdf文件,包含文件的基本属性 2.文件需要包含附件,通过点击链接直接打开 3.生成的pdf文件不能直接修改(需要输入密码) 4.pdf文件需要有文字或图片水印 准备jar包 ...

  7. 初试spring-session

    一.简介 spring-session提供了用户会话信息管理的API和实现. 它将取代容器中的HttpSession.在没有容器会话集群方案的情况下,使得支持会话集群微不足道. 它支持在一个浏览器实例 ...

  8. Vijos 1004 伊甸园日历游戏 博弈

    描述 Adam和Eve玩一个游戏,他们先从1900.1.1到2001.11.4这个日期之间随意抽取一个日期出来.然后他们轮流对这个日期进行操作: 1 : 把日期的天数加1,例如1900.1.1变到19 ...

  9. vsftpd配置虚拟用户

    #安装vsftpd yum -y install vsftpd #创建本地ftp账户 groupadd ftpuser useradd -g ftpuser -s /sbin/nologin ftpu ...

  10. VB6之WM_COPYDATA

    WM_COPYDATA消息是一种进程间通信的一种方式,参考文档如下: http://msdn.microsoft.com/en-us/library/windows/desktop/ms649011( ...