jquery 滑動選項卡實例效果代碼

多國外網站抓下來的jquery 滑動選項卡代碼我們一步步告訴你如何制作出如此漂亮的tab選項卡的切換代碼

<! 多國外<html xmlns="" dir="ltr">
<head>
<meta httpequiv="contenttype" content="text/html; charset=gb" />
<title>jquery 滑動選項卡實例效果代碼</title>
<link rel="stylesheet" href="css教程/generalcss" type="text/css" media="screen" />
<![if ie ]>
  <link rel="stylesheet" href="css/iecss" type="text/css" media="screen" />
<![endif]>
</head>
<body>
<a id="logo" title="go to yensdesigncom!" href=" target=_blank >mysql教程 forum database from scratch</li>
   <ul>
  </div>
  <div class="content links">
   <h>you may visit</h>
   <ul>
    <li><img src="css/images/bulletgif" alt="" /> <a href=" target=_blank >網頁特效" src=";></script>
<script type="text/javascript" src="tabsjs"></script>
</body>
</html>

沒有什麼可以評論在這裡讓我們跳進css的一部分

第步添加與css樣式
在這裡有一個必須說的小動作我們要創造班各部門共同的類稱為內容和每個部分單獨的類因此我們將有這些分歧

新聞內容
內容教程
內容鏈接
我們重用的類稱為"內容"並加入了第二類（新聞教程或鏈接）以相同的內容的部門改變每節一些小細節這樣做可以保存在您的布局的css代碼很多

@charset "utf";
/******* general reset *******/
html body div span applet object iframe h h h h h h p blockquote pre a abbr acronym address big cite code del dfn em
font img ins kbd q s samp small strike strong sub sup tt var dl dt dd ol ul li fieldset form label legend table caption tbody
tfoot thead tr th td {
border:pt none;
fontfamily:inherit;
fontsize: %;
fontstyle:inherit;
fontweight:inherit;
margin:pt;
padding:pt;
verticalalign:baseline;
}
body{
background: #fff;
lineheight:px;
fontsize: px;
fontfamily: arial verdana helvetica sansserif;
margin:pt;
cursor:default;
overflow: hidden;
}
htmlbody{
height:%;
textalign: center;
}
clear{
clear: both;
height: ;
visibility: hidden;
display: block;
}
a{
textdecoration: none;
}
/******* general reset *******/
/******* logo *******/
#logo{
margintop: em;
display: block;
}
/******* /logo *******/
/******* menu *******/
#container{
margin: em auto;
width: px;
}
#container ul{
liststyle: none;
liststyleposition: outside;
}
#container ulmenu li{
float: left;
marginright: px;
marginbottom: px;
}
#container ulmenu li{
fontweight: ;
display: block;
padding: px px px px;
background: #efefef;
marginbottom: px;
border: px solid #dccc;
borderwidth: px px px px;
position: relative;
color: #;
cursor: pointer;
}
#container ulmenu liactive{
background: #fff;
top: px;
borderbottom: ;
color: #fef;
}
/******* /menu *******/
/******* content *******/
content{
margin: pt auto;
background: #efefef;
background: #fff;
border: px solid #dccc;
textalign: left;
padding: px;
paddingbottom: px;
fontsize: px;
}
content h{
lineheight: em;
verticalalign: middle;
height: px;
padding: px px px px;
fontsize: px;
}
/******* /content *******/
/******* news *******/
contentnews h{
background: transparent url(images/newsjpg) norepeat scroll left top;
}
contentnews{
display: block;
}
/******* /news *******/
/******* tutorials *******/
contenttutorials h{
background: transparent url(images/tutsjpg) norepeat scroll left top;
}
contenttutorials{
display: none;
}
/******* /tutorials *******/
/******* links *******/
contentlinks h{
background: transparent url(images/linksjpg) norepeat scroll left top;
}
contentlinks{
display: none;
}
contentlinks a{
color: #fef;
}
/******* /links *******/

正如你所看到的我們要顯示和隱藏的新聞節默認的休息然後我們將用jquery可以顯示/隱藏使用事件

第步添加jquery的魔力我們標簽菜單
首先需要在eventsjs代碼所示

/***************************/
//@author: adrian "yens" mato gondelle &amp;amp; ivan guardado castro
//@website:
//@email:
//@license: feel free to use it but keep this credits please!
/***************************/

$(document)ready(function(){
$("menu > li")click(function(e){
  switch(etargetid){
   case "news":
    //change status &amp;amp; style menu
    $("#news")addclass("active");
    $("#tutorials")removeclass("active");
    $("#links")removeclass("active");
    //display selected division hide others
    $("divnews")fadein();
    $("divtutorials")css("display" "none");
    $("divlinks")css("display" "none");
   break;
   case "tutorials":
    //change status &amp;amp; style menu
    $("#news")removeclass("active");
    $("#tutorials")addclass("active");
    $("#links")removeclass("active");
    //display selected division hide others
    $("divtutorials")fadein();
    $("divnews")css("display" "none");
    $("divlinks")css("display" "none");
   break;
   case "links":
    //change status &amp;amp; style menu
    $("#news")removeclass("active");
    $("#tutorials")removeclass("active");
    $("#links")addclass("active");
    //display selected division hide others
    $("divlinks")fadein();
    $("divnews")css("display" "none");
    $("divtutorials")css("display" "none");
   break;
  }
  //alert(etargetid);
  return false;
});
});

From:http://tw.wingwit.com/Article/program/Java/hx/201405/30812.html