请问下这个jquery tab选项卡插件代码问题出在哪里？求指正

代码如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>tab插件2</title><st... 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab插件2</title>
<style type="text/css">
*{ margin: 0; padding: 0 }
.tabs{width: 400px; height: 200px; background-color: #ccc;margin:0 auto; position: relative;}
.tabs ul { width: 100%; list-style-type: none;position: absolute; left: 0; top: 0;}
.tabs ul li { width: 25%; float: left; text-align: center; min-height: 40px; line-height: 40px; text-decoration: none; font-family: "微软雅黑"; color: #a94442;background-color: #999; }

.tabs ul li.current{ background-color: #eee }
.tabCons div { display: none; height: 200px; position: absolute; left: 0; top: 0; padding-top: 50px;}
.tabCons .show{ display: block; color:;}

</style>
</head>
<body>
<div class="tabs">
<ul>
<li class="current"> JQuery</li>
<li>ExtJs</li>
<li>Slivert</a></li>
<li>oracal</a></li>
</ul>

<div class="tabCons">
<div class="show">Hello JQuery!Hello JQuery!Hello JQuery!Hello JQuery!Hello JQuery!</div>
<div>Hello ExtJs! Hello ExtJs!Hello ExtJs!Hello ExtJs!Hello ExtJs!Hello ExtJs!Hello ExtJs!</div>
<div>Hello Sliverlight!Hello Sliverlight!Hello Sliverlight!Hello Sliverlight!Hello Sliverlight!</div>
<div>Hello oracalight!Hello oracalight!Hello oracalight!Hello oracalight!Hello oracalight!Hello oracalight!</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript">
$(function()
{

;(function($) {

$.fn.tab=function(opts)
{
var defaults=
{
width:"400px",
height:"200px",
currClass:"current",
contClass:"show"

}

var options=$.extend({},defaults,opts);

var tablink=this.find("li");
var cont=this.find('.tabCons').find('div');

this.css({"width":options.width,"height":options.height});

return this.each(function() {

$(tablink).click(function()
{
console.log(this);

var curIndex=$(this).index();

$(this).addClass(options.currClass).siblings().removeClass(options.currClass);
$(cont).eq(index).addClass(options.contClass).siblings().removeClass(options.contClass);

});

})

}

})(jQuery);

$(".tabs").tab()

})

</script> 展开

 我来答

1个回答

#热议# 为什么说不要把裤子提到肚脐眼？

百度网友062f9c8
2016-08-24 · TA获得超过1254个赞

知道小有建树答主

回答量：840

采纳率：60%

帮助的人：725万

我也去答题访问个人页

关注

展开全部

我看了下代码，改了下：你重新引入下jquery

你的问题

1 class样式写的问题致使页面点不到li

.tabCons div { display: none; height: 200px; position: absolute; left: 0; top: 0; padding-top: 50px;}

去掉position

2、 jquery本身的逻辑问题我就不赘述了

3 、另外 jquery隐身迭代你就不用each循环了

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>tab插件2</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0
            }
            
            .tabs {
                width: 400px;
                height: 200px;
                background-color: #ccc;
                margin: 0 auto;
                position: relative;
            }
            
            .tabs ul {
                width: 100%;
                list-style-type: none;
                position: absolute;
                left: 0;
                top: 0;
            }
            
            .tabs ul li {
                width: 25%;
                float: left;
                text-align: center;
                min-height: 40px;
                line-height: 40px;
                text-decoration: none;
                font-family: "微软雅黑";
                color: #a94442;
                background-color: #999;
            }
            
            .tabs ul li.current {
                background-color: #eee
            }
            
            .tabCons div {
                display: none;
                height: 200px;
                left: 0;
                top: 0;
                padding-top: 50px;
            }
            
            .tabCons .show {
                display: block;
                color: ;
            }
        </style>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript">
            $(function() {

                ;
                (function($) {

                    $.fn.tab = function(opts) {
                        var defaults = {
                            width: "400px",
                            height: "200px",
                            currClass: "current",
                            contClass: "show"
                        }
                        var options = $.extend({}, defaults, opts);
                        var cont = this.find('.tabCons').find('div');
                        this.css({
                            "width": options.width,
                            "height": options.height
                        });
                        var $div = $("div", this);
                        $("ul li", this).on("click", function() {
                            var curIndex = $(this).index();
                            $(this).addClass(options.currClass).siblings().removeClass(options.currClass);
                            $div.eq(curIndex).show().addClass(options.contClass).siblings().removeClass(options.contClass).hide();    
                        });
                        return this;
                    }

                })(jQuery);

                $(".tabs").tab();
                
                
            })
        </script>

    </head>

    <body>
        <div class="tabs">
            <ul>
                <li class="current"> JQuery</li>
                <li>ExtJs</li>
                <li>Slivert</li>
                <li>oracal</li>
            </ul>

            <div class="tabCons">
                <div class="show">Hello JQuery!Hello JQuery!Hello JQuery!Hello JQuery!Hello JQuery!</div>
                <div>Hello ExtJs! Hello ExtJs!Hello ExtJs!Hello ExtJs!Hello ExtJs!Hello ExtJs!Hello ExtJs!</div>
                <div>Hello Sliverlight!Hello Sliverlight!Hello Sliverlight!Hello Sliverlight!Hello Sliverlight!</div>
                <div>Hello oracalight!Hello oracalight!Hello oracalight!Hello oracalight!Hello oracalight!Hello oracalight!</div>
            </div>
        </div>
        
    </body>

</html>

本回答由网友推荐

已赞过 已踩过<

评论收起

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

请问下这个jquery tab选项卡插件代码问题出在哪里？求指正

为你推荐：