jQuery 选项卡切换特效代码(点击切换)

老白 6个月前 321浏览 0评论

 选项卡.gif jQuery 选项卡切换特效代码(点击切换) js/jQuery

之前使用选项卡切换,喜欢用各种小插件,也许是因为封装的比较好,但也有不少前端不喜欢插件,喜欢自己写原始JS,或者使用jQuery写选项卡切换功能!

今天就不分享选项卡切换的插件了,就分享个如上图的jquery选项卡切换简单特效:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf8">

<title>如何利用jQuery製作頁籤 - 基礎範例</title>

<style>

* {

 margin: 0;

 padding: 0;

}

body {

 font: 300 14px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

 width: 500px;

 margin: 50px auto;

 background: #eee;

 color: #333;

 line-height: 1.5;

}

a {

 color: #258fb8;

 text-decoration: none;

}

a:hover {

 text-decoration: underline;

}

#tabs li {

 background: #ddd;

 border: 1px solid #ccc;

 border-bottom: none;

 display: inline-block;

 margin-right: 5px;

 padding: 5px 10px;

 color: #999;

 cursor: pointer;

}

#tabs li:hover {

 color: #666;

}

#tabs li.enable {

 border-bottom: 1px solid #ddd;

 margin-bottom: -1px;

 color: #333;

}

#contents {

 background: #ddd;

 border: 1px solid #ccc;

 box-shadow: 0 0 16px #ccc;

}

#contents>div {

 display: none;

 text-align: justify;

 padding: 10px 15px;

}

#contents>div:first-of-type {

 display: block;

}

footer {

 margin-top: 15px;

 font-size: 12px;

 color: #999;

 text-align: right;

}

footer .back {

 background: #258fb8;

 border-radius: 15px;

 color: #fff;

 float: left;

 font-weight: bold;

 padding: 5px 15px;

}

footer .back:hover {

 background: #2AA5D5;

 text-decoration: none;

}

</style>

<script src="
http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script
>

</head>

<body>

<ul id="tabs">

  <li class="enable">选项卡 1</li>

  <li>选项卡 2</li>

  <li>选项卡 3</li>

  <li>选项卡 4</li>

</ul>

<div id="contents">

  <div>jquery选项卡切换内容1</div>

  <div>jquery选项卡切换内容2jquery选项卡切换内容2jquery选项卡切换内容2jquery选项卡切换内容2jquery选项卡切换内容2jquery选项卡切换内容2jquery选项卡切换内容2jquery选项卡切换内容2jquery选项卡切换内容2jquery选项卡切换内容2jquery选项卡切换内容2jquery选项卡切换内容2jquery选项卡切换内容2jquery选项卡切换内容2jquery选项卡切换内容2</div>

  <div>jquery选项卡切换内容3</div>

  <div>jquery选项卡切换内容4</div>

</div>

<script>

 (function($){

  $('#tabs li').each(function(i){var _i=i;$(this).click(function(){$(this).parent().children().removeClass('enable').eq(_i).addClass('enable');$('#contents').children('div').hide().eq(_i).show();});});})(jQuery);

</script>

</body>

</html>

以上测试代码已经测试通过,可以放心使用!

后续还会分享关于选项卡切换的各种插件以及即插即用的特效!

发表评论