当前位置:首页 > 网站教程 > 内容列表

HTML5和CSS3中onclick实例教程总结

点击次数:更新时间:2018-04-04 20:04:43【打印】【关闭】

关于onclick的行为与内容分离

1.通过链接触发弹出窗口方式 (不推荐使用此方法!!!)

<a href='#'    

    onclcik = "window.open('holiday_pay.html',WinName,'width=300, height = 300');">  

Holiday Pay    

</a>  

如果JS被禁用链接无法引导用户进入对应页面,不要为href属性赋"#"及类似的值

2.普通情况

<a href='holiday_pay.html'    

    onclcik = "window.open(this.href,WinName,'width=300, height = 300');">  

Holiday Pay    

</a>  

3.0  大量重复链接,为每个链接分配可识别类名,通过使用jQuery为每个click事件分别添加监听器

 

<a href="holiday_pay" class="popup">Holiday pay</a>  

var links = $("a.popup");   

links.clcik(function(event){   

   event.preventDefault();   

   window.open($(this).attr('href'));      

});  

 

3.1  通多自定义数据类型设置弹出窗口尺寸大小 

 

<a href ="holiday_pay.html"  

    data-width="600"  

    data-heigth = "400"  

    title = "Holiday Pay"  

    class = "popup"> Holiday pay </a>   

JavaScript Code复制内容到剪贴板

$(function(){   

   $(".popup").click(function(event){   

       event.preventDefault();   

       var href=$(this).attr("href");   

       var width = $(this).attr("data-width");   

       var height = $(this).attr("data-height");   

       var popup = window.open(href,"popup","height="+height+",width="+width+"");   

}) ;   

});  

 

BEESCMS最好用的免费企业网站程序_PHP开源,免授权!
客服

工作时间

周一至周日

8:00 - 18:00

在线客服

点击这里给我发消息 BUG反馈

点击这里给我发消息 网站建设

点击这里给我发消息 域名空间

点击这里给我发消息 授权服务

点击这里给我发消息 售前咨询

点击这里给我发消息 意见反馈

点击这里给我发消息 销售客服

联系手机

18288433386

powerd by BEESCMS