JQuery标签页效果实例详解

下面我来详细讲解一下“JQuery标签页效果实例详解”的完整攻略。

1. 功能介绍

这个JQuery标签页效果实例主要实现的功能是：通过点击标签页来切换不同的内容区域。实现的效果比较简单，但常用于网站制作中，对于了解和应用JQuery有很大的帮助作用。

2. 实现过程

2.1 简单的HTML结构

为了实现标签页的效果，我们需要定义一个HTML结构。这个结构比较简单，包含一个ul列表和对应的多个div区域。其中ul列表用来显示标签或按钮，多个div区域用来显示不同的内容。代码如下：

<ul id="tabs">
  <li><a href="#tab1">标签1</a></li>
  <li><a href="#tab2">标签2</a></li>
  <li><a href="#tab3">标签3</a></li>
</ul>
<div id="content">
  <div id="tab1">这里是标签1的内容</div>
  <div id="tab2">这里是标签2的内容</div>
  <div id="tab3">这里是标签3的内容</div>
</div>

2.2 基本的CSS样式

在HTML结构定义之后，我们需要为标签页设置一些基本的样式。这里当然可以按照自己的需求来设置不同的样式。下面是一个比较简单的CSS样式示例：

#tabs li {
  list-style: none;
  float: left;
  margin-right: 10px;
}
#tabs a {
  display: block;
  height: 20px;
  padding: 0 5px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-bottom: none;
  text-decoration: none;
  color: #333;
}
#tabs a:hover {
  background-color: #f5f5f5;
}
#tabs a.active {
  background-color: #fff;
  border-color: #ccc;
  border-bottom: none;
}
#content div {
  display: none;
  padding: 10px;
  border: 1px solid #ccc;
  border-top: none;
}
#content div:first-child {
  display: block;
}

2.3 JQuery实现标签页

最后一步是通过JQuery来实现标签页的效果。具体实现的过程非常简单，我们只需要在页面加载完成后，注册一个点击事件，实现标签页的切换。代码如下：

$(document).ready(function() {
  $("#tabs a").click(function() {
    var tabid = $(this).attr("href");
    $("#tabs a").removeClass("active");
    $(this).addClass("active");
    $("#content div").hide();
    $(tabid).show();
    return false;
  });
});

2.4 示例1：实现横向标签页效果

上面示例中，我们所实现的标签页效果是垂直排列的，每一行只有一个标签。下面我们将展示一个横向排列的标签页效果，并给出相应的代码解释。

首先，我们需要修改一下CSS样式中的#tabs li和#tabs a的属性，使其具有横向排列的效果。

#tabs li {
  list-style: none;
  display: inline-block;
  margin-right: 10px;
}
#tabs a {
  display: inline-block;
  line-height: 20px;
  padding: 0 5px;
}

接下来是修改JQuery代码，主要是针对样式中的变动。因为我们修改了标签的排列方向，所以需要更改部分代码。

$(document).ready(function() {
  $("#tabs a").click(function() {
    var tabid = $(this).attr("href");
    $("#tabs a").removeClass("active");
    $(this).addClass("active");
    $("#content div").hide();
    $(tabid).show();
    return false;
  });

  // 下面为新加的代码，主要定义了标签宽度和居中
  var tab_width = $("#tabs a").outerWidth() + 20;
  var tab_count = $("#tabs li").length;
  var tabs_width = tab_width * tab_count;
  $("#tabs").css("width", tabs_width + "px").css("margin", "0 auto");
});

2.5 示例2：实现带图片的标签页效果

下面我们将为标签页添加一些图片，使标签页看起来更具吸引力。这里我们将提供一个完整的代码示例。

<!doctype html>
<html>
<head>
  <title>实现带图片的标签页效果</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <style>
    #tabs li {
      list-style: none;
      display: inline-block;
      margin-right: 10px;
    }
    #tabs a {
      display: inline-block;
      line-height: 20px;
      padding: 0 5px;
      background-color: #eee;
      border: 1px solid #ccc;
      border-bottom: none;
      text-decoration: none;
      color: #333;
    }
    #tabs a:hover {
      background-color: #f5f5f5;
    }
    #tabs a.active {
      background-color: #fff;
      border-color: #ccc;
      border-bottom: none;
    }
    #tabs a img {
      width: 18px;
      height: 18px;
      vertical-align: middle;
      margin-right: 5px;
    }
    #content div {
      display: none;
      padding: 10px;
      border: 1px solid #ccc;
      border-top: none;
    }
    #content div:first-child {
      display: block;
    }
  </style>
  <script>
    $(document).ready(function() {
      $("#tabs a").click(function() {
        var tabid = $(this).attr("href");
        $("#tabs a").removeClass("active");
        $(this).addClass("active");
        $("#content div").hide();
        $(tabid).show();
        return false;
      });

      var tab_width = $("#tabs a").outerWidth() + 20;
      var tab_count = $("#tabs li").length;
      var tabs_width = tab_width * tab_count;
      $("#tabs").css("width", tabs_width + "px").css("margin", "0 auto");

      // 这里添加了图片代码
      $("#tabs a").each(function() {
        var imgname = $(this).attr("href").substring(1) + ".png";
        var img = '<img src="' + imgname + '" />';
        $(this).prepend(img);
      });
    });
  </script>
</head>
<body>
  <ul id="tabs">
    <li><a href="#tab1">标签1</a></li>
    <li><a href="#tab2">标签2</a></li>
    <li><a href="#tab3">标签3</a></li>
  </ul>
  <div id="content">
    <div id="tab1">这里是标签1的内容</div>
    <div id="tab2">这里是标签2的内容</div>
    <div id="tab3">这里是标签3的内容</div>
  </div>
</body>
</html>

上面示例代码中，我们将每一个标签都加上了对应的图片，并将图片居中。这样就使得标签页看起来更加美观了。

3. 总结

到这里，我们就完成了JQuery标签页效果实例的详解。通过这个实例，可以体会到JQuery的强大和灵活性，同时也对JQuery标签页的使用有了更深入的认识。希望对大家有帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JQuery标签页效果实例详解 - Python技术站