如果你的页面只有一个tab(选项卡)切换的地方,需要调用js效果,如果单独为了它,还要为页面加载一个jQuery插件,想必是极痛苦的。所有很多时候,jQuery特效也不是万能的,偶尔来个原生的js效果也是必须的。今天闲着无聊,用js和jquery分别写了一个选项卡的效果,但是其中用到jquery只是为了更好的获取标签以及修改样式。
先来浏览一下效果图吧~~
如果你的页面只有一个tab(选项卡)切换的地方,需要调用js效果,如果单独为了它,还要为页面加载一个jQuery插件,想必是极痛苦的。所有很多时候,jQuery特效也不是万能的,偶尔来个原生的js效果也是必须的。今天闲着无聊,用js和jquery分别写了一个选项卡的效果,但是其中用到jquery只是为了更好的获取标签以及修改样式。
先来浏览一下效果图吧~~
布局很简单,其实就是两个div,第一个div中存放按钮,第二个div中存放内容。
2、css修饰
3、js效果实现
js写起来其实很简单,最重要的目的就是修改样式和制作动画。
2、css修饰
3、js实现
$(".btn-pic").css({ "border-bottom": "none","background-image":"none"});
$(".btn-news").css({ "border-bottom": "1px solid #CFCFCF","background-image":"url(images/1.jpg)"});
$(".btn-aff").css({ "border-bottom": "1px solid #CFCFCF","background-image":"url(images/1.jpg)"});
});
$(".title .btn-aff").click(function(){
$("#affairs").css({ "display": "block"});
$("#news").css({ "display": "none"});
$("#pictures").css({ "display": "none"});
$(".btn-aff").css({ "border-bottom": "none","background-image":"none"});
$(".btn-pic").css({ "border-bottom": "1px solid #CFCFCF","background-image":"url(images/1.jpg)"});
$(".btn-news").css({ "border-bottom": "1px solid #CFCFCF","background-image":"url(images/1.jpg)"});
});
$(".title .btn-news").click(function(){
$("#news").css({ "display": "block"});
$("#affairs").css({ "display": "none"});
$("#pictures").css({ "display": "none"});
$(".btn-news").css({ "border-bottom": "none","background-image":"url(images/1.jpg)"});
});
});
使用jquery最大的好处就是在获取标签的时候很方便,直接通过$和class名或者id名就直接获取。
以上就是本文的全部内容,希望对大家有所帮助,希望大家继续关注编程之家的最新内容。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。