位置：广州松河 > 技术支持 > jQuery 选项卡切换特效代码（点击切换）_js/jQuery

jQuery 选项卡切换特效代码（点击切换）_js/jQuery

来源：网络整理时间：2023/3/4 0:57:40 共 3647 浏览

之前使用选项卡切换，喜欢用各种小插件，也许是因为封装的比较好，但也有不少前端不喜欢插件，喜欢自己写原始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>

以上测试代码已经测试通过，可以放心使用！

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

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：jquery Tab选项卡切换插件推荐_js/jQuery | ·下一条：认识CSS3 :only-child 选择器和使用方法_CSS学习