一个入门级的jQuery插件

最新推荐文章于 2025-08-23 02:53:08 发布

转载最新推荐文章于 2025-08-23 02:53:08 发布 · 51 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/435126

文章标签：

#xhtml #javascript #ViewUI

本文介绍了一个简单的jQuery Tab插件，该插件实现了基本的Tab页面切换功能。通过自定义设置，可以指定默认显示的Tab页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是我自己动手写的一个jquery插件，简单之极。可能是连一点起码得实际作用都没有，仅仅作为自己的联系代码而已。如果有什么不足的地方，希望各路高手批评指正，一起进步。

1. 这是HTML 代码，包含一些CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="js/jquery-1.3.2.min.js"></script>
<script src="js/jquery.tab.js"></script>
<script>
$(document).ready(function(){
  $(".usual ul").fntab({selectedTab:"#tab2"});
});
</script>
<style>
ul li{
  text-align:center;
  display:inline;
}
.usual div{
  display:none
}
.selected{
background-color:#00FFFF;
}

.other{
  background-color:#9933FF;
}
</style>
</head>

<body>
                 <div id="usual1" class="usual">
                        <ul>
                            <li class="init"><a href="#tab1">Tab 1</a></li>
                            <li><a href="#tab2">Tab 2</a></li>
                            <li><a href="#tab3">Tab 3</a></li>
                        </ul>
                        <div id="tab1">This is tab 1.</div>
                        <div id="tab2">More content in tab 2.</div>
                        <div id="tab3">Tab 3 is always last!</div>
                 </div>
</body>
</html>

2.自己写的插件代码

// JavaScript Document

jQuery.fn.fntab = function(params){
  defaults = {
    selectedTab:"tab1"
  };

  setting =jQuery.extend(defaults,params);
  // 初始化
  $(setting.selectedTab).show();

  //添加单击事件
  $("li a",this).click(function(){

              var    tabId = $(this).attr("href");
              // 层的显示和隐藏
              $(tabId).show();
              $(tabId).siblings("div").hide();
              //tab class属性的切换
              $("#"+tabId).parent().removeClass("other").addClass("selected");

            });
}

效果：

实现简单的tab 页面切换。

本文转自 randy_shandong 51CTO博客，原文链接：http://blog.51cto.com/dba10g/239875，如需转载请自行联系原作者