Question

这是一个很棒的地方。我有以下代码，但它不起作用 - 当您单击这些选项卡中嵌入的链接时，不会更改选项卡。确定为什么这不起作用 - 请让我知道为什么你认为它可能不起作用..

<!doctype html>
<html lang="en">
<head>
    <title>jQuery UI Tabs</title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<script id="demo" type="text/javascript">
$(document).ready(function() {
    var tabs = $("#tabs").tabs();

    var $tabs = $('#tabs').tabs(); // first tab selected

    $('#my-text-link1').click(function() { // bind click event to link
        $tabs.tabs('select', 0); // switch to 1st tab
        return false;
    })
    $('#my-text-link2').click(function() { // bind click event to link
        $tabs.tabs('select', 1); // switch to 2nd tab
        return false;
    })
    $('#my-text-link3').click(function() { // bind click event to link
        $tabs.tabs('select', 2); // switch to third tab
        return false;
    })   
});
</script>   



</head>
<body>
<div class="demo">
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">ONE</a></li>
        <li><a href="#tabs-2">TWO</a></li>
        <li><a href="#tabs-3">and THREE</a></li>
    </ul>
    <div id="tabs-1">
        <p>This is TAB 1, now is the time.</p>
        <p><a href="#tabs-3" id="my-text-link5">I
               want to open tab 3</a></p>
    </div>
    <div id="tabs-2">
        <p>This is TAB 2, now is the time.</p>
        <p><a href="#tabs-2" id="my-text-link6">I
               want to open tab 2</a></p>
    </div>
    <div id="tabs-3">
        <p>This is TAB 3, now is the time.</p>
        <p><a href="#tabs-1" id="my-text-link4">I
               want to open tab 1</a></p>
    </div>
</div>
</div><!-- End demo --><!-- End demo-description -->
</body>
</html>

期待收到你的回复，

戴夫

通过克隆选项卡内的链接来更改选项卡

0 个答案: