如果你的頁面只有一個tab（選項卡）切換的地方，需要調用js效果，如果單獨為了它，還要為頁面加載一個jQuery插件，想必是極痛苦的。所有很多時候，jQuery特效也不是萬能的，偶爾來個原生的js效果也是必須的。今天閑著無聊，用js和jquery分別寫了一個選項卡的效果，但是其中用到jquery只是為了更好的獲取標簽以及修改樣式。
先來瀏覽一下效果圖吧~~
一、Javascript實現
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中存放內容。
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效果實現
<script type="text/javascript"> function xianshitupian(){ //讓圖片內容顯示出來 document.getElementById("tupian").style.display="block"; //讓新聞的內容隱藏 document.getElementById("xinwen").style.display="none"; //讓軍事的內容隱藏 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(){ //讓軍事內容顯示出來 document.getElementById("junshi").style.display="block"; //讓新聞的內容隱藏 document.getElementById("xinwen").style.display="none"; //讓圖片的內容隱藏 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(){ //讓新聞內容顯示出來 document.getElementById("xinwen").style.display="block"; //讓圖片的內容隱藏 document.getElementById("tupian").style.display="none"; //讓軍事的內容隱藏 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實現
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實現
/** * 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最大的好處就是在獲取標簽的時候很方便，直接通過$和class名或者id名就直接獲取。
以上就是本文的全部內容，希望對大家有所幫助，希望大家繼續關注武林網的最新內容。
新聞熱點
疑難解答
