JQuery 中选项卡选择的问题

发布于 2024-07-15 01:46:39 字数 3063 浏览 5 评论 0原文

我有以下问题：

我想创建一个网页，在其中可以通过侧边栏和 jQuery 选项卡本身的上部按钮栏使用 jQuery 选项卡。我正在使用以下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>title here</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="ui.core.js"></script>
        <script type="text/javascript" src="ui.datepicker.js"></script>
        <script type="text/javascript" src="ui.tabs.js"></script>
        <link rel="stylesheet" type="text/css" media="screen" href="local.css" />
        <script type="text/javascript">
            $(document).ready(function(){
            $("#datepicker").datepicker();
        });
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#tabs").tabs();
            });
            $("select2").click(function() { // bind click event to link
                $("$tabs").tabs("select", 1); // switch to third tab
                return false;
            });
        </script>
    </head>

<body>
    <div id="container">
        <div id="row">
            <div id="leftsubcontainer"><div class="column-in">
                <h4>rev0.1</h4>
                <p>medewerkernaam</p>
                <br/>
                <div type="text" id="datepicker"></div>
                <br/><br/>
                <br/><br/>
                <p>log out</p>
                <button id="select2">kies derde</button>
                <br/><br/>
            </div></div>
            <div id="rightsubcontainer"><div class="column-in">
                <div id="tabs">
                    <ul>
                        <li><a href="#tabs-1">Nunc tincidunt</a></li>
                        <li><a href="#tabs-2">Proin dolor</a></li>
                        <li><a href="#tabs-3">Aenean lacinia</a></li>
                    </ul>
                    <div id="tabs-1">
                        <p>tekst1</p>
                    </div>
                    <div id="tabs-2">
                        <p>tekst 2</p>
                    </div>
                    <div id="tabs-3">
                        <p>tekst 3</p>
                    </div>
                </div>
            </div></div>
        </div>
    </div>
</body>
</html>

问题是，每当我单击按钮时，选项卡都不会更改（即它没有选择正确的选项卡）。你们有人知道我做错了什么吗？

希望收到大家的来信，

亲切的问候，杰罗恩

原文

I have the following problem:

I want to create a webpage in which I can use the jQuery tabs both by a side-bar and by the upper button-bar of the jQuery tabs itself. I am using the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>title here</title>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="ui.core.js"></script>
        <script type="text/javascript" src="ui.datepicker.js"></script>
        <script type="text/javascript" src="ui.tabs.js"></script>
        <link rel="stylesheet" type="text/css" media="screen" href="local.css" />
        <script type="text/javascript">
            $(document).ready(function(){
            $("#datepicker").datepicker();
        });
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#tabs").tabs();
            });
            $("select2").click(function() { // bind click event to link
                $("$tabs").tabs("select", 1); // switch to third tab
                return false;
            });
        </script>
    </head>

<body>
    <div id="container">
        <div id="row">
            <div id="leftsubcontainer"><div class="column-in">
                <h4>rev0.1</h4>
                <p>medewerkernaam</p>
                <br/>
                <div type="text" id="datepicker"></div>
                <br/><br/>
                <br/><br/>
                <p>log out</p>
                <button id="select2">kies derde</button>
                <br/><br/>
            </div></div>
            <div id="rightsubcontainer"><div class="column-in">
                <div id="tabs">
                    <ul>
                        <li><a href="#tabs-1">Nunc tincidunt</a></li>
                        <li><a href="#tabs-2">Proin dolor</a></li>
                        <li><a href="#tabs-3">Aenean lacinia</a></li>
                    </ul>
                    <div id="tabs-1">
                        <p>tekst1</p>
                    </div>
                    <div id="tabs-2">
                        <p>tekst 2</p>
                    </div>
                    <div id="tabs-3">
                        <p>tekst 3</p>
                    </div>
                </div>
            </div></div>
        </div>
    </div>
</body>
</html>

The problem is, that, whenever I click on the button, the tabs are not changing (i.e. it does not select the right tab). Does anyone of you know what I have been doing wrong?

Hope to hear from you all,

kind regards,
Jeroen

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦里泪两行 2024-07-22 01:46:39

您的选择器存在一些拼写错误和问题，这些都造成了障碍。
用以下代码替换您的 javascript 代码

$(document).ready(function() {
    var $tabs = $("#tabs").tabs();
    $("#select2").click(function() {
        // bind click event to link
        $tabs.tabs("select", 1); // switch to second tab
        return false;
    });
});

应该可以正常工作。

You have a few typos and issues with your selectors that's getting in the way.
Repalce your javascript code with the following

$(document).ready(function() {
    var $tabs = $("#tabs").tabs();
    $("#select2").click(function() {
        // bind click event to link
        $tabs.tabs("select", 1); // switch to second tab
        return false;
    });
});

That should work fine.

回复收藏 0 原文

~没有更多了~