JavaScript仿网易选项卡制作代码

前端之家收集整理的这篇文章主要介绍了JavaScript仿网易选项卡制作代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

如果你的页面只有一个tab(选项卡)切换的地方,需要调用js效果,如果单独为了它,还要为页面加载一个jQuery插件,想必是极痛苦的。所有很多时候,jQuery特效也不是万能的,偶尔来个原生的js效果也是必须的。今天闲着无聊,用js和jquery分别写了一个选项卡的效果,但是其中用到jquery只是为了更好的获取标签以及修改样式。

先来浏览一下效果图吧~~

一、Javascript实现

1、html布局

Box">
SEOver="xianshixinwen()" class="s1">新闻 SEOver="xianshitupian()" class="s2">图片 SEOver="xianshijunshi()" class="s3">军事

布局很简单,其实就是两个div,第一个div中存放按钮,第二个div中存放内容。

2、css修饰

3、js效果实现

js写起来其实很简单,最重要的目的就是修改样式和制作动画。

二、jquery实现

1、html布局

2、css修饰

Box{ height:600px; margin-top: 100px; margin-left: 100px; } .title{ font:16px/30px "宋体"; height: 30px; width: 306px; border-top:2px solid #206F96; } .title .btn{ width:102px; height: 29px; font-size: 16px; } .title .btn-news{ border-left: 1px solid #CFCFCF; border-right: 1px solid #CFCFCF; float: left; background: #fff; } .title .btn-pic{ border-right: 1px solid #CFCFCF; border-bottom: 1px solid #CFCFCF; background: url(../images/1.jpg) repeat-x; float: left; } .title .btn-aff{ border-right: 1px solid #CFCFCF; border-bottom: 1px solid #CFCFCF; background: url(../images/1.jpg) repeat-x; float: left; } .contents ul{ padding-left:10px; } .contents ul li+li{ line-height:29px; } .contents ul li a{ color: #666; } .contents ul li:hover,.contents ul li:visited,.contents ul li a:hover,.contents ul li a :visited{ color: #68a3ff; } #pictures,#affairs{ display: none; }

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名就直接获取

以上就是本文的全部内容,希望对大家有所帮助,希望大家继续关注编程之家的最新内容

原文链接:https://www.f2er.com/js/45402.html
js选项卡

猜你在找的JavaScript相关文章