A herf="#" 的问题

三、我们开始进一步完善HTML代码。无序列表UL增加一些链接:

 Example Source Code [www.52css.com]
    <ul class="woaicss_title woaicss_title_bg1" id="woaicsstitle">
        <li><a  href="javascript:void(0)" οnclick="javascript:woaicssq(1)">52CSS.com</a></li>
        <li><a href="javascript:void(0)" οnclick="javascript:woaicssq(2)">Div CSS教程</a></li>
        <li><a href="javascript:void(0)" οnclick="javascript:woaicssq(3)">CSS布局实例</a></li>        
        <li><a href="javascript:void(0)" οnclick="javascript:woaicssq(4)">WEB标准化</a></li>
    </ul>


  1、我们为无序列表UL应用了两个类woaicss_title、woaicss_title_bg1,第一个类可以对UL及LI、链接进行整体的外观控制。以实现整体美化效果。我们也为无序列表UL指定了一个id为woaicsstitle,目的在于可以应用javascript进行样式控制。
  2、我们增加了四个链接,并对链接目标指定为:javascript:void(0)。我们应该了解,当链接为“#”时,浏览器会回到页面顶部。而此处我们并不希望看到这样的结果,因为在很多情况下,我们的切换框并不一定是在网页的第一屏,如果点击链接回到顶部,访客就不会立即看到内容层所出现的变化。失去了制作标签切换效果的意义。

      3.而且 onclick事件会比 href属性先执行,所以会先触发 onclick 然后触发href,所以如果不想页面跳转,可以设置 onclick里面的js代码执行到最后返回一个false,这样 href 里面的东西就不会执行了。

      4.A herf="#" 表示一个空锚,

        #包含了一个位置信息

       默认的锚点是#top 也就是网页的上端

      而javascript:void(0)  仅仅表示一个死链接

       这就是为什么有的时候页面很长浏览链接明明是#可是

     跳动到了页首

    而javascript:void(0) 则不是如此

     所以调用脚本的时候最好用void(0)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值