记录1

项目目录结构

one
--css
-- --cart.css
--image
-- --1.jpg
-- --2.jpg
-- --3.jpg
-- --4.jpg
-- --5.jpg
-- --6.jpg
-- --7.jpg
--js
-- --cart.js
--index.html
--test.html

index.html页面代码排布

    
    
    
    
    
    


    
    
    

    
    

         全选
        删除
        
结算
        
合计： ￥0.00
        
已选商品0件︽︾
        

            

                
![](image/1.jpg)取消选择
                
                ◆◆
            
        
    

我们要添加，否则页面中文部分都会乱码。

效果图如下：
+附上图片

href="javascript:;"

我们在底部导航条那里看到下面那行代码

删除

javascript: 是一个伪协议，其他的伪协议还有mail: tel: file: 等等。

举个栗子

修改密码

javascript:是表示在触发默认动作时，执行一段JavaScript代码。
javascript:;表示什么都不执行，也就是点击标签没有任何反应。
一般在使用javascript:;的时候我们会给绑定一个事件回调来执行业务代码:

理解描述

问：我们能不能理解为href="javascript:;"就是去掉标签的默认行为，跟href="javascript:void(0)"是一样的？
答：是一样的。
void是JavaScript的一个运算符，void(0)就是什么都不做的意思。这两种写法是等价的。

栗子执行

标签必须带有href属性，如果没有该属性就可以用其他标签代替了。

• 修改密码
  我们在项目根目录下创建一个test.html文件

    修改密码
    

我们给标签添加一个回调函数，当监听到该表情有点击动作时，就出发回调执行业务代码--弹出对话框，对话框中文本是test first。

而javascript的作用就是去掉标签的默认行为，也就是不会有默认的页面跳转动作。

• 修改密码1

    修改密码1
    

• 修改密码2

    修改密码2
    

• 修改密码3

    修改密码3
    

通过比较上面四种情况，我们发现结果都是一样的。
javascript:void(0)与javascript:;是一样的，这符合我们预期。但是href=""和href="javascript:"也是一样的效果，那么我们添加javascript:;完全是多余的吗？

e.preventDefault();

    修改密码4
    

在test.html页面中添加情况五的代码，运行结果与前面四种情况是一样的。

有效案例

前面情况五的代码是无法测试e.preventDefault()的作用的，因为该方法用于阻止默认事件产生，例如点击标签不打开url，点击提交按钮不提交表单等等。而前面我们的情况都是是禁止了标签的默认事件的，所以就算不使用该方法打开标签一样不会打开url。
通过下面情况六和情况七我们就能明白该方法的作用：
在情况六中，只会弹出对话框然后结束。这是因为标签默认事件是打开url进行页面跳转，而e.preventDefault()方法阻止了该默认事件，所以不会打开index.html页面的url进行页面跳转。
在情况七中，会先弹出对话框"test first5"然后跳转到index.html页面。

    
    修改密码5
    

    
    修改密码6
    

标签点击之后颜色变更问题

前面一共写了七种情况的案例，我们发现前面5种在点击标签前后字体颜色都是蓝色。最后两种情况在点击前是蓝色，点击之后字体颜色变成棕色（颜色变更表示已经点过该链接了）。那么为什么前面的不会变更颜色而后面的会呢？

这是因为 标签的默认css样式，默认点击前的动作对应蓝色，点击后的动作样式变成棕色。触发颜色更改的前提条件是标签的href属性值需要是一个html页面的url，不管是否阻止了该url的跳转，如情况六和情况七。而前面五种情况的href属性值都不是url，所以不会变色。

我们可以修改默认样式成为我们理想中的效果，方式是添加一个css样式：
a{ ... }a .link{ ... } a .hover{ ... } ...
也就是我们把手动对标签各种情况的样式进行设定，这样就覆盖了默认样式。