Javascript 单击jQuery选项卡时未单击_Javascript_Jquery

Javascript 单击jQuery选项卡时未单击

javascript jquery

Javascript 单击jQuery选项卡时未单击,javascript,jquery,Javascript,Jquery,我有使用UI1.10.0的jQuery选项卡。默认情况下，我的第一个选项卡处于激活状态；但是，我无法让其他5个选项卡工作。当我点击它们时，它们什么也不做，与选项卡协调的内容也不显示以下是基本的HTML代码： <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tabs</title> <script src="js/jquer

我有使用UI1.10.0的jQuery选项卡。默认情况下，我的第一个选项卡处于激活状态；但是，我无法让其他5个选项卡工作。当我点击它们时，它们什么也不做，与选项卡协调的内容也不显示

以下是基本的HTML代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabs</title>
<script src="js/jquery-ui-1.10.0.custom.min.js" script type="text/javascript"></script>
<script src="js/jquery-1.9.0.min.js" script type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery-ui-1.10.0.custom.min.css" type="text/css"/>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div id="simpaleTabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all" >
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active">
            <a href="#production" class="ui-tabs-anchor">Production</a>
         </li>
        <li class="ui-state-default ui-corner-top">
            <a href="#invoices" class="ui-tabs-anchor">Invoices</a>
         </li>
        <li class="ui-state-default ui-corner-top">
            <a href="#warranty" class="ui-tabs-anchor">Warranty</a>
         </li>
        <li class="ui-state-default ui-corner-top">
            <a href="#services" class="ui-tabs-anchor">Services</a>
         </li>
        <li class="ui-state-default ui-corner-top">
            <a href="#parts" class="ui-tabs-anchor">Parts List</a>
          </li>
        <li class="ui-state-default ui-corner-top"><a href="#memorandums" class="ui-tabs-anchor">Memorandums</a>
        </li>
    </ul>
    <div id="facebook" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
                content about Proudction here 
    </div>
    <div id="twitter" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
                content about Invoices here
    </div>
    <div id="linkedin" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
                content about Warranty here
    </div>
    <div id="google" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
                content about Services here
    </div>
    <div id="wikipedia" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
                content about Parts List here
    </div>
    <div id="picasa" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
                content about Memorandums here
    </div>
</div>


标签














这里有关于骄傲的内容
这里有关于发票的内容
这里有关于保修的内容
这里有关于服务的内容
这里有关于零件清单的内容
这里有备忘录的内容

下面是Javascript：

<script>
$(document).ready(function(){
    $('#simpaleTabs div').hide();
    $('#simpaleTabs div:first').show();
    $('#simpaleTabs ul li:first').addclass('active');

    $('#simpaleTabs ul li a').click(function(){
        $('#simpaleTabs ul li').removeClass('active');
        $(this).parent().addClass('active');
        var currentTab = $(this).attr('href');
        $('#simpaleTabs div').hide();
        $(currentTab).show();
        return false;
    });
    });
</script>


$（文档）.ready（函数（）{
$（'#simpaletbs div'）.hide（）；
$（'simpaletbs div:first'）.show（）；
$（'simpaleTabs ul li:first'）.addclass（'active'）；
$（'simpaleTabs ul li a'）。单击（函数（）{
$（'simpaleTabs ul li'）.removeClass（'active'）；
$（this.parent（）.addClass（'active'）；
var currentTab=$（this.attr（'href'）；
$（'#simpaletbs div'）.hide（）；
$（currentTab）.show（）；
返回false；
});
});

下一行的addclass中有一个打字错误。您指定了addclass而不是addclass

$('#simpaleTabs ul li:first').addclass('active');

下面是更新的js

$(document).ready(function () {
    $('#simpaleTabs div').hide();
    $('#simpaleTabs div:first').show();
    $('#simpaleTabs ul li:first').addClass('active');

    $('#simpaleTabs ul li a').click(function () {
        $("li").each(function () {
            $(this).removeClass('ui-tabs-active');
            $(this).removeClass('ui-state-active');
        });
        $(this).parent().addClass('ui-tabs-active');
        $(this).parent().addClass('ui-state-active');
        var currentTab = $(this).attr('href');
        $('#simpaleTabs div').hide();
        $(currentTab).show();
        return false;
    });
});

这是

如果你感兴趣的话，这里有更正的HTML

<div id="simpaleTabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active"> <a href="#production" class="ui-tabs-anchor">Production</a>

        </li>
        <li class="ui-state-default ui-corner-top"> <a href="#invoices" class="ui-tabs-anchor">Invoices</a>

        </li>
        <li class="ui-state-default ui-corner-top"> <a href="#warranty" class="ui-tabs-anchor">Warranty</a>

        </li>
        <li class="ui-state-default ui-corner-top"> <a href="#services" class="ui-tabs-anchor">Services</a>

        </li>
        <li class="ui-state-default ui-corner-top"> <a href="#parts" class="ui-tabs-anchor">Parts List</a>

        </li>
        <li class="ui-state-default ui-corner-top"><a href="#memorandums" class="ui-tabs-anchor">Memorandums</a>

        </li>
    </ul>
    <div id="production" class="ui-tabs-panel ui-widget-content ui-corner-bottom">content about Proudction here</div>
    <div id="invoices" class="ui-tabs-panel ui-widget-content ui-corner-bottom">content about Invoices here</div>
    <div id="warranty" class="ui-tabs-panel ui-widget-content ui-corner-bottom">content about Warranty here</div>
    <div id="services" class="ui-tabs-panel ui-widget-content ui-corner-bottom">content about Services here</div>
    <div id="parts" class="ui-tabs-panel ui-widget-content ui-corner-bottom">content about Parts List here</div>
    <div id="memorandums" class="ui-tabs-panel ui-widget-content ui-corner-bottom">content about Memorandums here</div>
</div>
















这里有关于骄傲的内容
这里有关于发票的内容
这里有关于保修的内容
这里有关于服务的内容
这里有关于零件清单的内容
这里有备忘录的内容

在HTML和JS中有一些错误

试试这个

HTML：您必须在锚点的href属性中输入正确的div“id”

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tabs</title>
<script src="js/jquery-ui-1.10.0.custom.min.js" script type="text/javascript"></script>
<script src="js/jquery-1.9.0.min.js" script type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery-ui-1.10.0.custom.min.css" type="text/css"/>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div id="simpaleTabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all" >
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active">
            <a href="#production" class="ui-tabs-anchor">Production</a>
         </li>
        <li class="ui-state-default ui-corner-top">
            <a href="#invoices" class="ui-tabs-anchor">Invoices</a>
         </li>
        <li class="ui-state-default ui-corner-top">
            <a href="#warranty" class="ui-tabs-anchor">Warranty</a>
         </li>
        <li class="ui-state-default ui-corner-top">
            <a href="#services" class="ui-tabs-anchor">Services</a>
         </li>
        <li class="ui-state-default ui-corner-top">
            <a href="#parts" class="ui-tabs-anchor">Parts List</a>
          </li>
        <li class="ui-state-default ui-corner-top"><a href="#memorandums" class="ui-tabs-anchor">Memorandums</a>
        </li>
    </ul>
    <div id="production"" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
                content about Proudction here 
    </div>
    <div id="invoices" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
                content about Invoices here
    </div>
    <div id="warranty" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
                content about Warranty here
    </div>
    <div id="services" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
                content about Services here
    </div>
    <div id="parts" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
                content about Parts List here
    </div>
    <div id="memorandums" class="ui-tabs-panel ui-widget-content ui-corner-bottom">
                content about Memorandums here
    </div>
</div>


标签














您应该在jqueryui之前包含jQuery。它可能会工作，但这肯定会让我非常紧张。这个HTML正在测试中。现在不太担心措辞。我只是想让标签工作。稍后会担心文本。
<script type="text/javascript">

$(document).ready(function(){
    $('#simpaleTabs div').hide();
    $('#simpaleTabs div:first').show();
    $('#simpaleTabs ul li:first').addClass('active');

    $('#simpaleTabs ul li a').click(function(){
        $('#simpaleTabs ul li').removeClass('ui-state-active').removeClass('ui-tabs-active').removeClass('active');
        $(this).parent("li").addClass('ui-state-active').addClass('ui-tabs-active').addClass('active');
        var currentTab = $(this).attr('href');
        $('#simpaleTabs div').hide();
        $(currentTab).show();
        return false;
    });
});
</script>