jquery插件开发之选项卡制作详解

我将详细讲解“jquery插件开发之选项卡制作详解”的完整攻略，包括如何实现、代码解析等方面。本攻略将分为以下几个部分：

• 选项卡制作的基本原理
• 选项卡制作的具体步骤
• 示例说明1：基础选项卡制作
• 示例说明2：带有图片切换的选项卡制作

选项卡制作的基本原理

选项卡实现的基本原理是利用JavaScript在页面加载后动态改变HTML的显示，从而实现切换不同内容的效果。通过CSS对每一个内容块的定位，给每一个内容块指定对应的样式，通过JS在点击不同的选项卡时切换对应内容块的显示与隐藏来实现切换的效果。

选项卡制作的具体步骤

1. 确定HTML布局，将内容块存放在一个容器内，并将每个内容块通过CSS样式设置为“display:none;”以隐藏起来。

2. 在HTML中添加选项卡，设置选项卡的事件类型（如click等）以及触发的事件（如切换相应容器的显示与隐藏）。

3. 添加JS代码实现选项卡的切换。JS代码应当具有以下功能：

4. 选项卡的切换

5. 点击选项卡时恢复对应内容块的显示并隐藏其他内容块（通过修改CSS样式实现）

6. 至此，一个基本的选项卡制作已经完成。

示例说明1：基础选项卡制作

HTML代码：

<div id="container">
    <div id="content1">内容1</div>
    <div id="content2">内容2</div>
    <div id="content3">内容3</div>
</div>

<ul id="tabuls">
    <li class="on">Tab1</li>
    <li>Tab2</li>
    <li>Tab3</li>
</ul>

CSS代码：

#container div {
  display: none;
}

#container div:first-child{
  display: block;
}

ul#tabuls li {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;
}

ul#tabuls li.on {
  background-color: #eee;
}

JS代码：

$(function() {
  $("#tabuls li").click(function() {
    var index = $(this).index();
    $("#container div").hide();
    $("#container div").eq(index).show();
    $("#tabuls li").removeClass("on");
    $(this).addClass("on");
  });
});

示例说明2：带有图片切换的选项卡制作

HTML代码：

<div id="container2">
    <div id="content11">内容1</div>
    <div id="content22">内容2</div>
    <div id="content33">内容3</div>
</div>

<ul id="tabuls2">
    <li class="on"><img src="img/pic1.jpg" alt="1" /></li>
    <li><img src="img/pic2.jpg" alt="2" /></li>
    <li><img src="img/pic3.jpg" alt="3" /></li>
</ul>

CSS代码：

#container2 div {
  display: none;
}

#container2 div:first-child{
  display: block;
}

ul#tabuls2 li {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;
}

ul#tabuls2 li.on {
  background-color: #eee;
}

ul#tabuls2 li img {
  height: 50px;
}

JS代码：

$(function() {
  $("#tabuls2 li").click(function() {
    var index = $(this).index();

    if($(this).hasClass("on")){
      return;
    }else{
      $("#contentimg").fadeOut(500,function(){
        $("#container2 div").hide();
        $("#container2 div").eq(index).show();
        $(this).attr("src","img/pic"+(index+1)+".jpg").fadeIn();
        $("#tabuls2 li").removeClass("on");
        $(this).addClass("on");
      }); 
    }
  });
});

通过上述的代码来自定义个人网站的选项卡，你可以根据自己的需求来灵活设置样式和Javascript代码。