1.介紹

自從接觸了javascript這款語言，我就深深為之著迷，那種靈動性讓我一度喜愛，而它的輕量級的庫jquery就可以說更加神奇了。為此這幾天寫了一個覺得很漂亮的小特效，分享一下。

2.html 分析

<div class="content">
  <ul class="content-nav">
      <li class="ac"><a href="#">最新資訊</a>
        <div></div>
      </li>
      <li><a href="#">籃球</a>
        <div></div>
      </li>
      <li><a href="#">潮流</a>
        <div></div>
      </li>
  </ul>
  <div class="content-list-one xianshi">
      <div>
       <img src="img/4.jpg" width="500" height="200">
      </div>
  </div>
  <div class="content-list-one ">
     本文主要介紹留言板系統(tǒng)的設(shè)計思路和制作過程，從留言板的重要性開始，介紹我的留言版采用的PHP技術(shù)和MYSQL數(shù)據(jù)庫，進(jìn)而闡述整技術(shù)。
  </div>
  <div class="content-list-one ">
     留言板是一種電子便簽管理系統(tǒng)，是用PHP或其它腳本語言編寫的網(wǎng)絡(luò)應(yīng)用程序。在網(wǎng)絡(luò)用戶交流中起很大的作用，每個人都可以將他
  </div>
</div>

3.Css 分析

一個網(wǎng)頁特效，基礎(chǔ)所在就是html布局，和css配合 html相信學(xué)前端的小伙伴們，上面的代碼應(yīng)該不難看懂。我就不細(xì)說了。我主要講講css技巧。

css技巧

頁面有兩個部分，一個導(dǎo)航 和 需要切換的內(nèi)容區(qū)域這里面，我把內(nèi)容區(qū)域用position:absolute;這個屬性定在一個點(diǎn)上。當(dāng)然他的父級需要加相對定位，要不然他默認(rèn)就是body是父級了。所以你寫了top,和left值時候 就不會順心如意。

利用css3 我們可以做一個非常棒的三角形，但并代表說圖片做出的三角形就會被淘汰，要知道有一種東西叫做低版本瀏覽器，當(dāng)然我們有嘲諷的意思。=。=！

不過三角形也需要絕對定位到每一個li上面，當(dāng)然此時li就是他的父級，這里我用div做的三角形。

代碼里面第一個li添加ac類什么用呢？

其實(shí)這就是默認(rèn)方式的一個技巧，我在寫個小東西的時候遇到了一個問題，思路想錯了，我想加上li的ac 再給它的子div（三角形）加 默認(rèn)class 其他的子div（三角形）隱藏，移動這個class，其他子div（三角形）隱藏。

這么想也沒錯，但是還是在移動小三角形出了點(diǎn)小問題。o.0 所以我就想到了一個棒棒的方法。

我并沒有給任何一個子div加類，而移動的只有l(wèi)i上的ac讓所有的li的子div（三角形）隱藏，讓li上帶有ac類的子div（三角形）顯示，好啦說了這么多了，我要上代碼了！

<style>
 *{ padding:0; margin:0; list-style:none;}
 .content-nav{ width:500px; height:30px; background:rgba(0,0,0,0.2); margin: 20px auto; clear:both;}
 .content-nav li{ float:left; margin-right:20px; width:100px; height:30px; text-align:center; line-height:30px; position:relative;}
  .content-nav li a{ color:#FFF; display:block; text-decoration:none;}
  .content-list-one{ width:500px; height:200px; background:#FF0; margin:0 auto; position:absolute; top:50px; left:430px; display:none;}
  .content{ position:relative;}
  .xianshi{ display: block;}
 .content-nav li.ac{ background:#000; color:#fffffff; }
 .content-nav li div{ display:none;}
 .content-nav li.ac div{ width:0; height:0; position:absolute; right:50px; top:30px;  border-left:6px solid transparent;
 border-right:6px solid transparent;  border-top:6px solid #000; cursor:pointer; display:block;}
 
</style>

3.Jquery 分析

其實(shí)jquery還真的特別方便，也許用javascript寫很長的代碼，用jquery幾句話就ok啦~ 不過我個人認(rèn)為兩種方式都有好有壞，原生的東西運(yùn)行的速度要比用jquery要快一些，當(dāng)然這種速度之間的差距，還是很小的。。。

+_+ 咱們繼續(xù)剛才的正題

html css寫好了，那么jquery怎么寫呢？ 首先我們要點(diǎn)擊當(dāng)前的 li顯示下面的內(nèi)容，比如，點(diǎn)擊第一個li 就要顯示第一頁內(nèi)容，第二個li就顯示第二頁內(nèi)容 那么好，我們要先寫導(dǎo)航切換，然后在索引下面的內(nèi)容。

需要用到的方法有，click() addClass() removeClass() siblings() find()
fadeIn() fadeOut() index() eq()

誰點(diǎn)擊呢？ 當(dāng)然是li 嘍，不過命名還是要規(guī)范點(diǎn)好 兩種比較喜歡的形式

$(".父級類名 li").click(function(){
      代碼
  //$(this).addClass("ac").siblings("li").removeClass("ac");
})
$(".父級類名 ").find("li").click(function(){
   
//$(this).addClass("ac").siblings("li").removeClass("ac");
})

上面那些方法，分別是點(diǎn)擊方法，添加類名方法，移除類名方法，篩選同胞元素，（也就是同層元素）...從那找到的方法，淡入方法，淡出方法 索引方法 , 選取的方法。

不是很難，如果還是不懂可能需要自行查查手冊，看看w3c了

好，上面就是導(dǎo)航條如何切換了，給當(dāng)前點(diǎn)擊li添加ac類，然后篩選出（“l(fā)i”）的這種同胞元素，移除掉他們身上的ac類。

那么如何控制下面的內(nèi)容呢？

這就需要我們的索引了， 索引怎么說，通俗點(diǎn)理解。就是一致，第一個li對應(yīng)的就是第一個內(nèi)容div 。

可能還是有點(diǎn)混吧， 第一個li的第一個索引是0，第一個div索引也是0， 他們相等就可以完成切換了。。

有些時候語言不能完美的闡述我要說的東西，還是代碼來的更加有說服力

<script>
$(function(){
    $(".content-nav li").click(function(){
        
           $(this).addClass("ac").siblings("li").removeClass("ac");
           var index=$(this).index();
           $(".content-list-one").eq(index).addClass("xianshi").siblings("div").removeClass("xianshi");
           //$(".content-list-one").eq(index).fadeIn().siblings("div").fadeOut();
           
        
        })
     
    });
</script>

結(jié)束語

好啦，以上就是我為大家?guī)淼囊粋€小案例，案例雖然小，不過我也希望能幫助到你們，再次多謝觀看~~~~_以后見