用JS写动态导航

$(function(){

  var url=window.location.pathname;

  if(url.indexOf(‘index‘)!=-1){                                  //即在网址路径中找到了字符串‘index‘

    $(‘ul li‘).each(function(){

      $(this).find(‘a‘).removeClass(‘current‘);

    });

    $("ul li a[href*=‘fifi‘]").addClass(‘current‘);        //a[href*=‘fifi‘]——属性选择器;

  }

})

百度搜索注释:a.indexOf("X")可返回某个指定的字符串值X在字符串a中首次出现的位置。字符位置是从 0 开始;

w3c注释:indexOf() 方法对大小写敏感!

w3c注释:如果要检索的字符串值没有出现,则该方法返回 -1。!!!

属性选择器——参考最常用CSS选择器:http://www.w3cfuns.com/article-1756-1-1.html

    12. X[title*="http://www.w3cfuns.com"]

    a[href*="http://www.w3cfuns.com"] {color: #1f6053;}

    属性选择器。正如我们想要的,上面代码匹配的是href中包含”http://www.w3cfuns.com“的所有链接。
    兼容浏览器:IE7+、Firefox、Chrome、Safari、Opera

时间: 2024-08-02 21:24:53

用JS写动态导航的相关文章

JS写动态分页样式效果

效果图如下: html: <body> <div> <table id="btnbox"> <tbody> <tr><td> <a href="#" class="btn">上一页</a> <a href="#" index="1">1</a> <a href="#&quo

用js写动态时钟 2017-03-23

45每隔1秒变一次: 代码如下: <body onLoad="show()" >   ------------表示当页面载入时执行该事件,可以没有 <div id="count1"> </div> <script> function show(){ var d=new Date(); var dy=d.getFullYear(); var dm=d.getMonth()+1;     ------------月份要加1

css,js写的简易的tab导航

简易tab导航 作为前端新手,看着别人写的tab导航代码,自己想模仿却总是忘记.于是这次自己利用css,js写了简易的tab导航,话不多说,上代码,首先是html和css部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab选项卡切换</title> <style type="tex

Jquery实现动态导航栏和轮播导航栏

动态导航栏和轮播导航栏的实现思想: 利用jquery技术的append()方法和bind()方法实现li标签的添加和点击事件绑定,在利用$getJSON(url,data,function)请求方法实现获取springmvc传递的list<map<String,Object>>的值.其中还遇到了浏览器兼容问题,主要是Mozilla Firefox兼容margin属性的值的问题,最后解决办法是:创建2(IE和FireFox)种类型的css样式,根据myBrowser()自定义方法判断

JS实现动态瀑布流及放大切换图片效果(js案例)

整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击图片放大.上下切换效果.HTML布局写的很简单,图片加载主要是在JS中通过访问自定义的JSON字符串来实现.动态瀑布流的原理简单理解就是把新需要加载的图片放在上一排总高度最小的图片或模块下面,实现参差不齐的多栏布局效果.具体效果如下: 做这个案例我用了之前自己封装的框架,所以小伙伴需要到我的另一篇文

“高三”笔记之动态JS、动态样式

拜读<JavaScript高级程序设计> --- 站在巨人的肩上 动态JS.动态样式就是页面加载时不存在,但将来通过DOM操作动态添加的脚本:包括加载外部文件和添加内部代码块两种:动态加载的外部文件能够立即运行,而动态添加的代码块却不能如愿的立即执行:下面将主要以JS为例,小小的探索下动态脚本的加载.执行以及jQuery的做法.Angularjs的相关做法: 1.动态加载外部文件 因为动态加载的外部JS会立即执行,也没什么浏览器兼容性问题,这个好处理:这里的重点是怎么知道脚本已加载完成呢?呵呵

初探JavaScript(二)——JS如何动态操控HTML

除去五一三天,我已经和<JavaScript Dom编程艺术>磨合了六天,第一印象很好.慢慢的,我发现这是一块排骨,除了肉还有骨头.遇到不解的地方就会多看几遍,实在不懂的先跳过,毕竟,初次接触JS,没有必要花费过多时间去钻死胡同,先混个脸熟,以后再来拜访也未尝不可嘛.就这样,踉踉跄跄.囫囵吞枣似的已经过五关斩六将,到达第十一章. 书中有几个章节并没有从语法.技术等层面介绍JavaScript,而是站在一个全局的角度,立足编程原则和习惯道破了我们该如何看待和使用这门语言,主要有以下几点: Jav

js写一个通讯录

模拟通讯录列表功能 我们手机上面的通讯录列表里面都有根据右侧的字母跳滚动到该字母的第一个名单地方. 于是我把这个功能拆分成两个功能区思考: 第一个是如何把这些名字的的汉字首字母提取出来,并且把相同字母的汉字归类,最后显示成列表. 第二是右侧字母导航,它需要一直固定在右侧,并且我按一个字母,屏幕最中间会弹出一个字母方框,代表我选中了这个字母. 我首先去实现第一个问题,如何提取名字中第一个汉字的首字母? 我去尝试过许多种方法,其中尝试过使用localeCompare(),我也成功的排序了,但是我发现

JS写小游戏(一):游戏框架

前言 前一阵发现一个不错的网站,都是一些用html5+css+js写的小游戏,于是打算学习一番,写下这个系列博客主要是为了加深理解,当然也有一些个人感悟,如果英文好可以直接Click Here. 概述 一般,小游戏都要关注两个问题:刷新和交互.因为游戏一般是动态的,所以需要不断刷新.JavaScript是单线程,如果用C语言写过贪吃蛇之类的小游戏,应该知道,单线程一般是挂起一个时间来达到动态效果.比如C语言的Sleep(),JS的setInterval()等.但是js还有一种更高性能的方法req