DIV CSS 佈局教程網

如果你的頁面只有一個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名就直接獲取。 

以上就是本文的全部內容，希望對大家有所幫助，希望大家繼續關注的最新內容。