javascript - Jquery 选项卡不起作用或引用错误？

Question

这段代码有什么问题？标签不起作用：

<div id="tabs">
    <ul>
        <li><a href="#tabs-1"><span class="tabs-1">Dados Um</span></a>

        </li>
        <li><a href="#tabs-2"><span class="tabs-2">Dados Dois</span></a>

        </li>
        <li><a href="#tabs-3"><span class="tabs-3">Dados Três</span></a>

        </li>
        <li><a href="#tabs-4"><span class="tabs-4">Dados Quatro</span></a>

        </li>
        <li><a href="#tabs-5"><span class="tabs-5">Dados Cinco</span></a>

        </li>
        <li><a href="#tabs-6"><span class="tabs-6">Dados Seis</span></a>

        </li>
    </ul>
    <div id="tabs-1"></div>
    <div id="tabs-2"></div>
    <div id="tabs-3"></div>
    <div id="tabs-4"></div>
    <div id="tabs-5"></div>
    <div id="tabs-6"></div>
</div>

和 JS：

$(document).ready(function () {
    $("#tabs").tabs();

    $('.tabs-2').bind("click", tabs2);
    $('.tabs-3').bind("click", tabs3);
    $('.tabs-4').bind("click", tabs4);
    $('.tabs-5').bind("click", tabs5);
};

function tabs2() {
    alert("hi");
};

和这里的 JSFiddle

Answer 1

看看这个：http: //jsfiddle.net/Aw43k/1/

看起来您的 JSFiddle 的问题在于它缺少 jQuery 和 jQueryUI。也不需要 jQuery on ready 函数。

$("#tabs").tabs(); 

$('.tabs-2').bind("click", tabs2);
$('.tabs-3').bind("click", tabs3);
$('.tabs-4').bind("click", tabs4);
$('.tabs-5').bind("click", tabs5);

function tabs2() {
  alert("hi");
}

Answer 2

你能检查一下http://jsfiddle.net/y2FCK/1/

$("#tabs").tabs(); 

$('.tabs-2').bind("click", tabs2);
$('.tabs-3').bind("click", tabs3);
$('.tabs-4').bind("click", tabs4);
$('.tabs-5').bind("click", tabs5);

function tabs3() {
   alert("clicked tab3");
};

在小提琴中添加了 Jquery UI js，您还需要在项目文件中包含相同的内容：

 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>