jQuery选项卡不起作用或引用错误？

Question

What is wrong with this code? Tabs aren't working:

<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>

And 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");
};

And JSFiddle here

Answer 1

Check this out: http://jsfiddle.net/Aw43k/1/

Looks like the problem with your JSFiddle was that it was missing jQuery and jQueryUI. Also jQuery on ready function is not needed.

$("#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

Can you please check 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");
};

Added Jquery UI js in fiddle and also you need to include the same in your project file:

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