如何使用jQuery制作展开和折叠切换面板

 我来答

1个回答

#热议# 什么是淋病？哪些行为会感染淋病？

jhy_0608
2014-11-26 · 超过44用户采纳过TA的回答

知道小有建树答主

回答量：73

采纳率：0%

帮助的人：78.5万

我也去答题访问个人页

关注

展开全部

<!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>
<title></title>
<style type="text/css">
body {
    background-color: black;
}
.tabsDiv {
    width: 500px;
    height: 350px;
    margin-top: 0px;
    margin-left: 0px;
}
.tabsDiv ul {
    width: 500px;
    height: 20px;
    list-style: none;
    background-color: black;
    margin-bottom: 0px;
    margin: 0px;
    padding: 0px;
}
.tabsDiv ul li {
    float: left;
}
.tabsDiv div {
    width: 500px;
    height: 330px;
    background-color: white;
}
.tabsSeletedLi {
    width: 100px;
    height: 20px;
    background-color: white;
    float: left;
    text-align: center;
}
.tabsSeletedLi a {
    width: 100px;
    height: 20px;
    color: black;
}
.tabsUnSeletedLi {
    width: 100px;
    height: 20px;
    background-color: black;
    float: left;
    text-align: center;
}
.tabsUnSeletedLi a {
    width: 100px;
    height: 20px;
    color: white;
}
</style>
<script src="../../js/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
    $("#mytabs").tabs();
});
//
(function ($) {
    $.fn.tabs = function (options) {
        var defualts = { switchingMode: "click" };//定义默认的鼠标事件
        var opts = $.extend({}, defualts, options);//合并鼠标事件
        var obj = $(this);//整个tab区域
        var clickIndex = 0;
        obj.addClass("tabsDiv");//给tab加上自定义的class
        $("ul li:first", obj).addClass("tabsSeletedLi");//给第一个选项卡加上自定义的class
        $("ul li", obj).not(":first").addClass("tabsUnSeletedLi");//给除了第一个的选项卡加上自定义的class
        $("div", obj).not(":first").hide();//面板区域，除了第一个其他全部隐藏
        $("ul li", obj).bind(opts.switchingMode, function () {//给tab区域的选项卡绑定事件
            if (clickIndex != $("ul li", obj).index($(this))) {
                clickIndex = $("ul li", obj).index($(this));
                $(".tabsSeletedLi", obj).removeClass("tabsSeletedLi").addClass("tabsUnSeletedLi");//选中的选项卡的样式改变
                $(this).removeClass("tabsUnSeletedLi").addClass("tabsSeletedLi");//当前点击的选项卡的样式改变
                var divid = $("a", $(this)).attr("href").substr(1);
                $("div", obj).hide();
                $("#" + divid, obj).show();//显示对应的面板区域
            };
        });
    };
})(jQuery); 
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<!--tabs示例-->
<div id="mytabs"> 
    <!--选项卡区域-->
    <ul>
        <li><a href="#tabs1">选项1</a></li>
        <li><a href="#tabs2">选项2</a></li>
        <li><a href="#tabs3">选项3</a></li>
    </ul>
    <!--面板区域-->
    <div id="tabs1">11111</div>
    <div id="tabs2">22222</div>
    <div id="tabs3">33333</div>
</div>
</body>
</html>


本回答被提问者和网友采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

如何使用jQuery制作展开和折叠切换面板

其他类似问题

为你推荐：