亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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)文章

  • 微信小程序?qū)崿F(xiàn)聯(lián)動菜單

    微信小程序?qū)崿F(xiàn)聯(lián)動菜單

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)聯(lián)動菜單，左右側(cè)菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-09-09
  • JavaScript編程設(shè)計模式之觀察者模式(Observer Pattern)實例詳解

    JavaScript編程設(shè)計模式之觀察者模式(Observer Pattern)實例詳解

    這篇文章主要介紹了JavaScript編程設(shè)計模式之觀察者模式(Observer Pattern),簡單說明了觀察者模式的概念、原理并結(jié)合實例形式詳細(xì)給出了觀察者模式的相關(guān)實現(xiàn)與使用技巧,需要的朋友可以參考下
    2017-10-10
  • javascript實現(xiàn)密碼驗證

    javascript實現(xiàn)密碼驗證

    這篇文章主要介紹了javascript密碼驗證的實現(xiàn)方法，過程很簡單具有一定的參考價值，適合初學(xué)者學(xué)習(xí)研究，感興趣的小伙伴們可以參考一下
    2015-11-11
  • JavaScript中0和

    JavaScript中0和""比較引發(fā)的問題

    這篇文章主要介紹了JavaScript中0和""比較引發(fā)的問題,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
    2016-05-05
  • javascript 尋找錯誤方法整理

    javascript 尋找錯誤方法整理

    為了以后能快速尋找到這方面的錯誤，節(jié)約更多的時間，下面將問題的解決方法整理了一下
    2014-06-06
  • bootstrap中模態(tài)框、模態(tài)框的屬性實例詳解

    bootstrap中模態(tài)框、模態(tài)框的屬性實例詳解

    這篇文章主要介紹了bootstrap中模態(tài)框、模態(tài)框的屬性實例詳解,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
    2017-02-02
  • 小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)與數(shù)據(jù)傳遞方案

    小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)與數(shù)據(jù)傳遞方案

    在開發(fā)過程中經(jīng)常會遇到在微信小程序的頁面跳轉(zhuǎn)以及數(shù)據(jù)傳遞的知識點,所以下面這篇文章主要給大家介紹了關(guān)于小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)與數(shù)據(jù)傳遞的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-09-09
  • JS實現(xiàn)隨機顏色的3種方法與顏色格式的轉(zhuǎn)化

    JS實現(xiàn)隨機顏色的3種方法與顏色格式的轉(zhuǎn)化

    隨機顏色和顏色格式是我們在開發(fā)中經(jīng)常要用到的一個小功能，網(wǎng)上相關(guān)的資料也很多，想著有必要總結(jié)一下自己的經(jīng)驗。所以這篇文章主要介紹了JS實現(xiàn)隨機顏色的3種方法與顏色格式的轉(zhuǎn)化,需要的朋友可以參考借鑒，下面來一起看看吧。
    2017-01-01
  • 使用Function.apply()的參數(shù)數(shù)組化來提高 JavaScript程序性能的技巧

    使用Function.apply()的參數(shù)數(shù)組化來提高 JavaScript程序性能的技巧

    這篇文章主要介紹了使用Function.apply()的參數(shù)數(shù)組化來提高 JavaScript程序性能的技巧，對js function apply相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧
    2015-12-12
  • JavaScript數(shù)組類型Array相關(guān)的屬性與方法詳解

    JavaScript數(shù)組類型Array相關(guān)的屬性與方法詳解

    這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組類型Array相關(guān)的屬性與方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-09-09

最新評論