JavaScript仿網(wǎng)易選項卡制作代碼
更新時間：2016年10月06日 09:19:06 作者：Wendy-lxq
這篇文章主要為大家詳細(xì)介紹了JavaScript仿網(wǎng)易選項卡制作代碼，具有一定的參考價值，感興趣的朋友可以參考一下
如果你的頁面只有一個tab（選項卡）切換的地方，需要調(diào)用js效果，如果單獨為了它，還要為頁面加載一個jQuery插件，想必是極痛苦的。所有很多時候，jQuery特效也不是萬能的，偶爾來個原生的js效果也是必須的。今天閑著無聊，用js和jquery分別寫了一個選項卡的效果，但是其中用到j(luò)query只是為了更好的獲取標(biāo)簽以及修改樣式。
先來瀏覽一下效果圖吧~~
一、Javascript實現(xiàn)
1、html布局
<div id="box">
<div class="biaoti">
<span id="span_xinwen" onmouseover="xianshixinwen()" class="s1">新聞</span>
<span id="span_tupian" onmouseover="xianshitupian()" class="s2">圖片</span>
<span id="span_junshi" onmouseover="xianshijunshi()" class="s3">軍事</span>
</div>
<div class="neirong">
<div class="info" id="xinwen">
<ul>
<li><a href="####">新聞新聞新聞新聞新聞新聞新聞新聞新聞</a></li>
<li><a href="####">新聞新聞新聞新聞新聞新聞新聞新聞新聞</a></li>
<li><a href="####">新聞新聞新聞新聞新聞新聞新聞新聞新聞</a></li>
<li><a href="####">新聞新聞新聞新聞新聞新聞新聞新聞新聞</a></li>
<li><a href="####">新聞新聞新聞新聞新聞新聞新聞新聞新聞</a></li>
<li><a href="####">新聞新聞新聞新聞新聞新聞新聞新聞新聞</a></li>
<li><a href="####">新聞新聞新聞新聞新聞新聞新聞新聞新聞</a></li>
<li><a href="####">新聞新聞新聞新聞新聞新聞新聞新聞新聞</a></li>
<li><a href="####">新聞新聞新聞新聞新聞新聞新聞新聞新聞</a></li>
</ul>
</div>
<div class="info" id="tupian">
<ul>
<li><a href="####">圖片圖片圖片圖片圖片圖片圖片圖片圖片</a></li>
<li><a href="####">圖片圖片圖片圖片圖片圖片圖片圖片圖片</a></li>
<li><a href="####">圖片圖片圖片圖片圖片圖片圖片圖片圖片</a></li>
<li><a href="####">圖片圖片圖片圖片圖片圖片圖片圖片圖片</a></li>
<li><a href="####">圖片圖片圖片圖片圖片圖片圖片圖片圖片</a></li>
<li><a href="####">圖片圖片圖片圖片圖片圖片圖片圖片圖片</a></li>
<li><a href="####">圖片圖片圖片圖片圖片圖片圖片圖片圖片</a></li>
<li><a href="####">圖片圖片圖片圖片圖片圖片圖片圖片圖片</a></li>
<li><a href="####">圖片圖片圖片圖片圖片圖片圖片圖片圖片</a></li>
</ul>
</div>
<div class="info" id="junshi">
<ul>
<li><a href="####">軍事軍事軍事軍事軍事軍事軍事軍事軍事</a></li>
<li><a href="####">軍事軍事軍事軍事軍事軍事軍事軍事軍事</a></li>
<li><a href="####">軍事軍事軍事軍事軍事軍事軍事軍事軍事</a></li>
<li><a href="####">軍事軍事軍事軍事軍事軍事軍事軍事軍事</a></li>
<li><a href="####">軍事軍事軍事軍事軍事軍事軍事軍事軍事</a></li>
<li><a href="####">軍事軍事軍事軍事軍事軍事軍事軍事軍事</a></li>
<li><a href="####">軍事軍事軍事軍事軍事軍事軍事軍事軍事</a></li>
<li><a href="####">軍事軍事軍事軍事軍事軍事軍事軍事軍事</a></li>
<li><a href="####">軍事軍事軍事軍事軍事軍事軍事軍事軍事</a></li>
</ul>
</div>
</div>
</div>
布局很簡單，其實就是兩個div，第一個div中存放按鈕，第二個div中存放內(nèi)容。
2、css修飾
<style type="text/css">
#box{
height:600px;
margin-top: 100px;
margin-left: 100px;
}
#box .biaoti{
font:16px/30px "宋體";
height: 30px;
width: 310px;
border-top:2px solid #206F96;
text-align: center;
}
#box .biaoti .s1{
width: 102px;
height: 29px;
border-left: 1px solid #CFCFCF;
border-right: 1px solid #CFCFCF;
float: left;
}
#box .biaoti .s2{
width: 102px;
height: 29px;
border-right: 1px solid #CFCFCF;
border-bottom: 1px solid #CFCFCF;
background: url(images/1.jpg) repeat-x;
float: left;
}
#box .biaoti .s3{
width: 102px;
height: 29px;
border-right: 1px solid #CFCFCF;
border-bottom: 1px solid #CFCFCF;
background: url(images/1.jpg) repeat-x;
float: left;
}
#box .neirong ul{
list-style: none;
padding-left: 0px;
}
#box .neirong ul li{
line-height: 30px;
padding-left: 0px;
}
#box .neirong ul li a:link,#box .neirong ul li a:visited{
text-decoration: none;
color:#666;
font-size: 16px;
}
#tupian,#junshi{
display: none;
}
</style>
3、js效果實現(xiàn)
<script type="text/javascript">
function xianshitupian(){
//讓圖片內(nèi)容顯示出來
document.getElementById("tupian").style.display="block";
//讓新聞的內(nèi)容隱藏
document.getElementById("xinwen").style.display="none";
//讓軍事的內(nèi)容隱藏
document.getElementById("junshi").style.display="none";
//讓圖片的背景隱藏
document.getElementById("span_tupian").style.background="none";
//讓新聞的背景加上圖片
document.getElementById("span_xinwen").style.background="url(images/1.jpg) repeat-x";
//讓軍事的背景加上圖片
document.getElementById("span_junshi").style.background="url(images/1.jpg) repeat-x";
//讓圖片的下劃線隱藏
document.getElementById("span_tupian").style.borderBottom="none";
//讓新聞的下劃線加上
document.getElementById("span_xinwen").style.borderBottom="1px solid #CFCFCF ";
//讓軍事的下劃線加上
document.getElementById("span_junshi").style.borderBottom="1px solid #CFCFCF ";
}
function xianshijunshi(){
//讓軍事內(nèi)容顯示出來
document.getElementById("junshi").style.display="block";
//讓新聞的內(nèi)容隱藏
document.getElementById("xinwen").style.display="none";
//讓圖片的內(nèi)容隱藏
document.getElementById("tupian").style.display="none";
//讓軍事的背景隱藏
document.getElementById("span_junshi").style.background="none";
//讓新聞的背景加上圖片
document.getElementById("span_xinwen").style.background="url(images/1.jpg) repeat-x";
//讓圖片的背景加上圖片
document.getElementById("span_tupian").style.background="url(images/1.jpg) repeat-x";
//讓軍事的下劃線隱藏
document.getElementById("span_junshi").style.borderBottom="none";
//讓新聞的下劃線加上
document.getElementById("span_xinwen").style.borderBottom="1px solid #CFCFCF ";
//讓圖片下劃線加上
document.getElementById("span_tupian").style.borderBottom="1px solid #CFCFCF ";
}
function xianshixinwen(){
//讓新聞內(nèi)容顯示出來
document.getElementById("xinwen").style.display="block";
//讓圖片的內(nèi)容隱藏
document.getElementById("tupian").style.display="none";
//讓軍事的內(nèi)容隱藏
document.getElementById("junshi").style.display="none";
//讓新聞的背景隱藏
document.getElementById("span_xinwen").style.background="none";
//讓圖片的背景加上圖片
document.getElementById("span_tupian").style.background="url(images/1.jpg) repeat-x";
//讓軍事的背景加上圖片
document.getElementById("span_junshi").style.background="url(images/1.jpg) repeat-x";
//讓新聞的下劃線隱藏
document.getElementById("span_xinwen").style.borderBottom="none";
//讓圖片的下劃線加上
document.getElementById("span_tupian").style.borderBottom="1px solid #CFCFCF ";
//讓軍事下劃線加上
document.getElementById("span_junshi").style.borderBottom="1px solid #CFCFCF ";
}
</script>
js寫起來其實很簡單，最重要的目的就是修改樣式和制作動畫。
二、jquery實現(xiàn)
1、html布局
<div class="box">
<div class="title">
<button class="btn btn-news">新聞</button>
<button class="btn btn-pic">圖片</button>
<button class="btn btn-aff">軍事</button>
</div>
<div class="contents">
<div class="info" id="news">
<ul>
<li><a href="#">新聞新聞新聞新聞新聞新聞新聞新聞新聞</a></li>
<li><a href="#">新聞新聞新聞新聞新聞新聞新聞新聞新聞</a></li>
<li><a href="#">新聞新聞新聞新聞新聞新聞新聞新聞新聞</a></li>
<li><a href="#">新聞新聞新聞新聞新聞新聞新聞新聞新聞</a></li>
<li><a href="#">新聞新聞新聞新聞新聞新聞新聞新聞新聞</a></li>
<li><a href="#">新聞新聞新聞新聞新聞新聞新聞新聞新聞</a></li>
<li><a href="#">新聞新聞新聞新聞新聞新聞新聞新聞新聞</a></li>
<li><a href="#">新聞新聞新聞新聞新聞新聞新聞新聞新聞</a></li>
<li><a href="#">新聞新聞新聞新聞新聞新聞新聞新聞新聞</a></li>
<li><a href="#">新聞新聞新聞新聞新聞新聞新聞新聞新聞</a></li>
</ul>
</div>
<div class="info" id="pictures">
<ul>
<li><a href="#">圖片圖片圖片圖片圖片圖片圖片圖片圖片</a></li>
<li><a href="#">圖片圖片圖片圖片圖片圖片圖片圖片圖片</a></li>
<li><a href="#">圖片圖片圖片圖片圖片圖片圖片圖片圖片</a></li>
<li><a href="#">圖片圖片圖片圖片圖片圖片圖片圖片圖片</a></li>
<li><a href="#">圖片圖片圖片圖片圖片圖片圖片圖片圖片</a></li>
<li><a href="#">圖片圖片圖片圖片圖片圖片圖片圖片圖片</a></li>
<li><a href="#">圖片圖片圖片圖片圖片圖片圖片圖片圖片</a></li>
<li><a href="#">圖片圖片圖片圖片圖片圖片圖片圖片圖片</a></li>
<li><a href="#">圖片圖片圖片圖片圖片圖片圖片圖片圖片</a></li>
<li><a href="#">圖片圖片圖片圖片圖片圖片圖片圖片圖片</a></li>
</ul>
</div>
<div class="info" id="affairs">
<ul>
<li><a href="#">軍事軍事軍事軍事軍事軍事軍事軍事軍事</a></li>
<li><a href="#">軍事軍事軍事軍事軍事軍事軍事軍事軍事</a></li>
<li><a href="#">軍事軍事軍事軍事軍事軍事軍事軍事軍事</a></li>
<li><a href="#">軍事軍事軍事軍事軍事軍事軍事軍事軍事</a></li>
<li><a href="#">軍事軍事軍事軍事軍事軍事軍事軍事軍事</a></li>
<li><a href="#">軍事軍事軍事軍事軍事軍事軍事軍事軍事</a></li>
<li><a href="#">軍事軍事軍事軍事軍事軍事軍事軍事軍事</a></li>
<li><a href="#">軍事軍事軍事軍事軍事軍事軍事軍事軍事</a></li>
<li><a href="#">軍事軍事軍事軍事軍事軍事軍事軍事軍事</a></li>
<li><a href="#">軍事軍事軍事軍事軍事軍事軍事軍事軍事</a></li>
</ul>
</div>
</div>
</div>
2、css修飾
body{
margin:0px;
padding:0px;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
button{
border:none;
}
input,button,select,textarea{
outline:none;
}
.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實現(xiàn)
/**
* Created by lxq on 2016/10/3.
*/
$(document).ready(function(){
$(".title .btn-pic").click(function(){
$("#pictures").css({ "display": "block"});
$("#news").css({ "display": "none"});
$("#affairs").css({ "display": "none"});
$(".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":"none"});
$(".btn-pic").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)"});
});
});
使用jquery最大的好處就是在獲取標(biāo)簽的時候很方便，直接通過$和class名或者id名就直接獲取。
以上就是本文的全部內(nèi)容，希望對大家有所幫助，希望大家繼續(xù)關(guān)注腳本之家的最新內(nèi)容。
相關(guān)文章
這篇文章主要介紹了在JS中刪除對象的某個屬性的幾種方案,分別是使用delete操作符、解構(gòu)賦值、Object.fromEntries()、Reflect.deleteProperty()以及如何在集合對象中應(yīng)用這些方法,需要的朋友可以參考下2025-03-03
JavaScript Event學(xué)習(xí)第二章 Event瀏覽器兼容性
在這一章我將對重要的事件做一個概述，包括一些流行的瀏覽器的兼容性問題。2010-02-02
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)倒計時，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了微信小程序緩存時效性，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了javascript跨域請求包裝函數(shù)與用法,結(jié)合實例形式分析了javascript基于ajax的跨域請求封裝函數(shù)與相關(guān)使用技巧,需要的朋友可以參考下2016-11-11
項目開發(fā)過程中遇到JSON字符串回顯的情況,直接顯示的話效果很丑,不方便查看,因此需要在前端頁面對JSON進(jìn)行格式化顯示,下面這篇文章主要給大家介紹了關(guān)于前端顯示json格式化的相關(guān)資料,需要的朋友可以參考下2024-03-03
這篇文章主要為大家詳細(xì)介紹了layDate日期控件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
由JavaScript技術(shù)實現(xiàn)的web小游戲（不含網(wǎng)游）
伴隨Ajax與網(wǎng)頁游戲的崛起，曾幾何時JavaScript也成了游戲開發(fā)時可供選擇的技術(shù)之一，文本 僅列舉數(shù)項由JavaScript技術(shù)實現(xiàn)的web小游戲（不含網(wǎng)游），聊作參考之用。2010-06-06
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)樓層效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要為大家詳細(xì)介紹了js+html5實現(xiàn)側(cè)滑頁面效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07