angularJs tab样式切换方法之一

html:

<ul class="nav-list">    <li ng-class="{‘active‘ : current == 5}" ng-click="setCurrent(5)"><a ui-sref=".goodsManage" >商品管理</a></li>    <li ng-class="{‘active‘ : current == 6}" ng-click="setCurrent(6)"><a href="" >仓库签约</a></li>    <li ng-class="{‘active‘ : current == 7}" ng-click="setCurrent(7)"><a href="" >客户管理</a></li></ul>

js
//点击,样式变换$scope.setCurrent = function(index){    $scope.current = index;}

注: 其中 active 为点击后要添加上的样式
时间: 2024-10-02 08:50:14

angularJs tab样式切换方法之一的相关文章

运用jQuery简化TAB样式切换代码

原生JS代码 window.onload = init; function init(){ // 首先获得所有的标题对象-使用选择符API var allTitles = document.querySelectorAll("a[data-cid]"); // 遍历它们,分别为它们绑定事件响应函数 for(var i=0;i<allTitles.length;i++){ allTitles[i].onmouseover = function(){ // 先重置所有的标题样式 re

js实现简单百度分页和两种tab样式切换简单实现

<span style="font-family:KaiTi_GB2312;font-size:18px;">1.分页 /* *分页 */ var size = data.count; //总页数 var spage = (page - 1) < 1 ? 1 : (page - 1); var pagehtml = "<a href=\"#\" onclick=\"javascript:getBookList("

207 jQuery 样式操作:css (),addClass,removeClass,toggleClass,tab 栏切换案例

? jQuery中常用的样式操作有两种:css() 和 设置类样式方法 1.4.1 方法1: 操作 css 方法 ? jQuery 可以使用 css 方法来修改简单元素样式: 也可以操作类,修改多个样式. ? 常用以下三种形式 : // 1.参数只写属性名,则是返回属性值 var strColor = $(this).css('color'); // 2. 参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号 $(this).css(''color''

Android自定义控件----RadioGroup实现APP首页底部Tab的切换

?[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4463931.html 联系方式:[email protected] [正文] 实现APP首页底部Tab的切换已经见过四五种方式了,先来看运行的效果图吧: 今天我们就用RadioGroup的方法来实现以下. [开发环境] 物理机版本:win 7旗舰版(64位) IDE版本:Android Stud

利用target的特性,可以实现纯css的tab效果切换

基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1" class="tab">This is a tab1</div> :target{ color:red; } 但点击a标签的时候,连接到id是tab1的div,对这个div起作用color:red; 如: <a href="#tab"

centos7/redhat7 将网卡名字改成eth样式的方法

centos7/redhat7 将网卡名字改成eth样式的方法 方法/步骤 1 编辑 /etc/sysconfig/grub 找到“GRUB_CMDLINE_LINUX”这一行 2 在rhgb前面,添加net.ifnames=0 biosdevname=0 3 在打开的终端上然后执行 grub2-mkconfig -o /boot/grub2/grub.cfg 4 用命令切换到/etc/sysconfig/network-scripts/网卡目录下,如图所示 5 我这里是有两个网卡信息,将ifc

JavaScript之tab面板切换

自己写了一个tab选项卡的切换,感觉还不错,跟大家分享一下. 一.点击切换 页面效果: html页面: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>tab面板切换</title> <style> .content{width: 1000px;height: 500px;margin: 0 auto;border: 1px s

iOS开发:使用Tab Bar切换视图

iOS开发:使用Tab Bar切换视图 上一篇文章提到了多视图程序中各个视图之间的切换,用的Tool Bar,说白了还是根据触发事件使用代码改变Root View Controller中的Content View.这次,我们还是讲一讲切换视图,不过这次使用的是Tab Bar. 这次要写的程序运行起来的效果是这样的:底部有几个图标,每个图标对应一个视图.每点击一个图标,对应的视图就会打开.如下图,就是我们做好的程序效果:    每个Tab Bar有一个对应颜色的视图. 为了搞清使用Tab Bar切

Win10使用“Alt+Tab”快捷键切换不了窗口怎么办

Win10使用"Alt+Tab"快捷键切换不了窗口怎么办?Alt+Tab快捷键有切换电脑页面窗口的功能,有时候发现居然切换不了,下面百事网小编给大家带来Win10使用"Alt+Tab"快捷键切换不了窗口的解决方法. 步骤如下: 1.点击开始菜单,选择运行,输入"regedit",点击确定,如图: 2.依次展开"HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Expl