按钮组,导航条选中其中一个后添加Class突出元素

$(document).on("click",".modalnavtop",function(e){
        $(".modalnavtop").each(function(){
            if(this==e.target){
            if($(e.target).hasClass("navActive")){
                return
            }
            else{
                $(e.target).addClass("navActive");
            }}
            else{
                if($(this).hasClass("navActive")){
                    $(this).removeClass("navActive");
                }
            }
        });
$(selector).each(function(index,element))
参数    描述
function(index,element)
必需。为每个匹配元素规定运行的函数。
index - 选择器的 index 位置
element - 当前的元素(也可使用 "this" 选择器)
时间: 2025-01-01 23:31:26

按钮组,导航条选中其中一个后添加Class突出元素的相关文章

往一个容器 添加删除子元素演示,和,给数 组添加自定义方法

/*2015 12 2 往一个容器 添加删除子元素演示*/ //全局静态变量的写法 (function(){ //获取元素对象 var container = document.getElementById("container"); var btnAdd = document.getElementById("btnAdd"); var btnDel = document.getElementById("btnDel"); //定义数组 var

jQuery -> 如何【先创建、再修改、后添加】 DOM元素

如何一气呵成地,on the fly地操作DOM元素呢? 例如顺序执行[创建]-> [修改]-> [添加]三个动作. 由于jQuery支持链式操作,其实就是设计模式的builder模式,所以我们可以把三个操作串在一起来执行. 首先创建一个p元素,内容包含一个a元素. $('<p><a>jQuery</a></p>') 然后为a元素添加一个href属性 $('<p><a>jQuery</a></p>'

vue导航条选中项样式

html: <div id="app"> <div class="collection"> <a href="#!" v-for="gameName in gameNames" @click="selected(gameName)" :class="{active: activeName == gameName}">{{gameName}}</a

Bootstrap系列 -- 42. 导航条中的按钮、文本和链接

Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,还可以使用其他元素.框架提供了三种其他样式: 1.导航条中的按钮navbar-btn 2.导航条中的文本navbar-text 3.导航条中的普通链接navbar-link 但这三种样式在框架中使用时受到一定的限制,需要和navbar-brand.navbar-nav配合起来使用.而且对数量也有一定的限制,一般情况在使用一到两个不会有问题,超过两个就会有问题. <d

Bootstrap导航条

前面的话 导航条(navbar)和导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式.本文将详细介绍Bootstrap导航条 基础导航条 在Bootstrap框架中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多. 导航条是在应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并且可开

Bootstarp学习(十一)导航条

导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个"条"字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式.在这一节中将一起探讨Bootstrap框架中导航条的使用. 导航条和导航一样,在Bootstrap框架中是一个独立组件,所以你也可以根据自己的需求使用不同的版本: LESS版本:对应的源文件navbar.less S

神奇的Bootstrap 导航条 全面实战篇

转载请注明出处:http://blog.csdn.net/smartbetter/article/details/52056377 导航条(navbar)在Bootstrap中是一个独立组件,导航条(navbar)和导航(nav)在Bootstrap中是有明显的区别的.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接.表单.表单和导航一起结合等多种形式. 1.实战一-带二级菜单和表单的导航条 <!DOCTYPE HTML> <html> <head> &l

2.制作响应式导航条

制作响应式导航条 一.设置主结构元素 下面开始准备页面内容.打开Project Template 1中的index.html文件,里面目前只有一下基本的内容 我们会添加如下内容完成主结构元素 包含Logo和导航的页头区: 包含页面内容的内容区: 包含版权和社交媒体链接的页脚区: <header role="banner"> <nav role="navigation"> </nav> </header> <mai

Bootstrap之导航条,分页导航

导航条基础 导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式.   基础导航条 使用方法: 在制作一个基础导航条时,主要分以下几步: 第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav” 第二步:在列表外部添加一个容器(div),并且使