使用jQuery创建表格列表

Question

使用jQuery创建表格列表

4

我要在我的网站上使用jQuery创建两个表格列表，我已经使用了jQuery网站中的标签功能完成了这个目标，但不幸的是，在我的网站上它无法正常工作。

我所使用的代码如下：

<div id="best_tabs">
                        <ul class="clearfix">
                            <li><a href="#tab_1">جدیدترین</a></li>
                            <li><a href="#tab_2">محبوب ترین</a></li>
                        </ul>
                            <div id="tab_1">
                                <ul>
                                                                                            <li><a href="http://2day.hisend.ir/post-the-next-day/">post the next day</a></li>
                                    <li><a href="http://2day.hisend.ir/post-the-next-day/">post the next day</a></li>
                                    <li><a href="http://2day.hisend.ir/entire-post/">entire post</a></li>
                                    <li><a href="http://2day.hisend.ir/entire-post/">entire post</a></li>
                                    <li><a href="http://2day.hisend.ir/hello-world/">Hello world!</a></li>
                                    <li><a href="http://2day.hisend.ir/hello-world/">Hello world!</a></li>
                                    <li><a href="http://2day.hisend.ir/%d8%b4%d8%b1%da%a9%d8%aa-%d9%86%d9%81%d8%aa-%d8%a7%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-%d9%85%db%8c-%da%a9%d9%86%d8%af/">شرکت نفت استخدام می کند</a></li>
                                    <li><a href="http://2day.hisend.ir/%d8%b4%d8%b1%da%a9%d8%aa-%d9%86%d9%81%d8%aa-%d8%a7%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-%d9%85%db%8c-%da%a9%d9%86%d8%af/">شرکت نفت استخدام می کند</a></li>
                                    <li><a href="http://2day.hisend.ir/%d8%af%d8%a7%d9%86%d9%84%d9%88%d8%af-%d9%85%d9%88%d8%b2%db%8c%da%a9-%d8%a7%d8%a8%d8%b1%d8%a7%d9%87%db%8c%d9%85-%d9%be%d8%a7%d8%b1%d8%b3/">دانلود موزیک ابراهیم پارس</a></li>
                                    <li><a href="http://2day.hisend.ir/%d8%af%d8%a7%d9%86%d9%84%d9%88%d8%af-%d9%85%d9%88%d8%b2%db%8c%da%a9-%d8%a7%d8%a8%d8%b1%d8%a7%d9%87%db%8c%d9%85-%d9%be%d8%a7%d8%b1%d8%b3/">دانلود موزیک ابراهیم پارس</a></li>
                                    <li><a href="http://2day.hisend.ir/%d8%af%d9%86%db%8c%d8%a7%db%8c-%d9%85%d8%a8%d8%aa%d9%86%db%8c-%d8%a8%d8%b1-%d8%b3%db%8c%d9%86%d9%85%d8%a7/">دنیای مبتنی بر سینما</a></li>
                                    <li><a href="http://2day.hisend.ir/%d8%af%d9%86%db%8c%d8%a7%db%8c-%d9%85%d8%a8%d8%aa%d9%86%db%8c-%d8%a8%d8%b1-%d8%b3%db%8c%d9%86%d9%85%d8%a7/">دنیای مبتنی بر سینما</a></li>
                                    <li><a href="http://2day.hisend.ir/%d8%b3%db%8c%d9%86%d9%85%d8%a7-%d9%86%d8%a8%d8%a7%d8%b4%d8%af-%d8%af%d9%86%db%8c%d8%a7-%d9%86%db%8c%d8%b3%d8%aa/">سینما نباشد دنیا نیست</a></li>
                                    <li><a href="http://2day.hisend.ir/%d8%b3%db%8c%d9%86%d9%85%d8%a7-%d9%86%d8%a8%d8%a7%d8%b4%d8%af-%d8%af%d9%86%db%8c%d8%a7-%d9%86%db%8c%d8%b3%d8%aa/">سینما نباشد دنیا نیست</a></li>
                                    <li><a href="http://2day.hisend.ir/%d8%a8%d8%a7%d8%a8-%d8%a7%d8%b3%d9%81%d9%86%d8%ac%db%8c/">باب اسفنجی</a></li>
                                    <li><a href="http://2day.hisend.ir/%d8%a8%d8%a7%d8%a8-%d8%a7%d8%b3%d9%81%d9%86%d8%ac%db%8c/">باب اسفنجی</a></li>
                                    <li><a href="http://2day.hisend.ir/%d9%81%d9%88%d8%aa%d8%a8%d8%a7%d9%84%db%8c%d8%b3%d8%aa-%d9%87%d8%a7/">فوتبالیست ها</a></li>
                                    <li><a href="http://2day.hisend.ir/%d9%81%d9%88%d8%aa%d8%a8%d8%a7%d9%84%db%8c%d8%b3%d8%aa-%d9%87%d8%a7/">فوتبالیست ها</a></li>
                                    <li><a href="http://2day.hisend.ir/%d9%81%d9%88%d8%aa%d8%a8%d8%a7%d9%84-%d9%84%db%8c%d9%86%d8%ac%d8%a7%d9%86/">فوتبال لینجان</a></li>
                                    <li><a href="http://2day.hisend.ir/%d9%81%d9%88%d8%aa%d8%a8%d8%a7%d9%84-%d9%84%db%8c%d9%86%d8%ac%d8%a7%d9%86/">فوتبال لینجان</a></li>
                                    <li><a href="http://2day.hisend.ir/%d8%b3%d9%88%d9%86%db%8c%da%a9/">سونیک</a></li>
                                    <li><a href="http://2day.hisend.ir/%d8%b3%d9%88%d9%86%db%8c%da%a9/">سونیک</a></li>
                                    <li><a href="http://2day.hisend.ir/%d9%85%d8%a7-%d8%ae%d9%88%d8%a7%d8%b3%d8%aa%d8%a7%d8%b1-%d8%b5%d9%84%d8%ad-%d9%87%d8%b3%d8%aa%db%8c%d9%85/">ما خواستار صلح هستیم</a></li>
                                    <li><a href="http://2day.hisend.ir/%d9%85%d8%a7-%d8%ae%d9%88%d8%a7%d8%b3%d8%aa%d8%a7%d8%b1-%d8%b5%d9%84%d8%ad-%d9%87%d8%b3%d8%aa%db%8c%d9%85/">ما خواستار صلح هستیم</a></li>
                                    <li><a href="http://2day.hisend.ir/%d8%aa%d8%a7-%d8%ae%d9%88%d9%86-%d8%af%d8%b1-%d8%b1%da%af-%d9%85%d8%a7%d8%b3%d8%aa/">تا خون در رگ ماست</a></li>
                                    <li><a href="http://2day.hisend.ir/%d8%aa%d8%a7-%d8%ae%d9%88%d9%86-%d8%af%d8%b1-%d8%b1%da%af-%d9%85%d8%a7%d8%b3%d8%aa/">تا خون در رگ ماست</a></li>
                                    <li><a href="http://2day.hisend.ir/%d8%b3%db%8c%d8%b3%d8%a7%d8%b3%d8%aa-%d9%88%d8%a7%d8%ad%d8%af/">سیساست واحد</a></li>
                                    <li><a href="http://2day.hisend.ir/%d8%b3%db%8c%d8%b3%d8%a7%d8%b3%d8%aa-%d9%88%d8%a7%d8%ad%d8%af/">سیساست واحد</a></li>
                                    <li><a href="http://2day.hisend.ir/%d8%a7%d8%ae%d8%a8%d8%a7%d8%b1-%d8%ac%d8%af%db%8c%d8%af/">اخبار جدید</a></li>
                                    <li><a href="http://2day.hisend.ir/%d8%a7%d8%ae%d8%a8%d8%a7%d8%b1-%d8%ac%d8%af%db%8c%d8%af/">اخبار جدید</a></li>

                                </ul>
                            </div>
                            <div id="tab_2">

                                    <ul>

                                                                    <li><a href="http://2day.hisend.ir/%d9%85%d8%a7-%d8%ae%d9%88%d8%a7%d8%b3%d8%aa%d8%a7%d8%b1-%d8%b5%d9%84%d8%ad-%d9%87%d8%b3%d8%aa%db%8c%d9%85/">ما خواستار صلح هستیم</a></li>
                                            <li><a href="http://2day.hisend.ir/%d8%b4%d8%b1%da%a9%d8%aa-%d9%86%d9%81%d8%aa-%d8%a7%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-%d9%85%db%8c-%da%a9%d9%86%d8%af/">شرکت نفت استخدام می کند</a></li>
                                            <li><a href="http://2day.hisend.ir/%d8%af%d9%86%db%8c%d8%a7%db%8c-%d9%85%d8%a8%d8%aa%d9%86%db%8c-%d8%a8%d8%b1-%d8%b3%db%8c%d9%86%d9%85%d8%a7/">دنیای مبتنی بر سینما</a></li>
                                            <li><a href="http://2day.hisend.ir/%d8%af%d8%a7%d9%86%d9%84%d9%88%d8%af-%d9%85%d9%88%d8%b2%db%8c%da%a9-%d8%a7%d8%a8%d8%b1%d8%a7%d9%87%db%8c%d9%85-%d9%be%d8%a7%d8%b1%d8%b3/">دانلود موزیک ابراهیم پارس</a></li>
                                            <li><a href="http://2day.hisend.ir/%d8%aa%d8%a7-%d8%ae%d9%88%d9%86-%d8%af%d8%b1-%d8%b1%da%af-%d9%85%d8%a7%d8%b3%d8%aa/">تا خون در رگ ماست</a></li>
                                            <li><a href="http://2day.hisend.ir/%d8%a8%d8%a7%d8%a8-%d8%a7%d8%b3%d9%81%d9%86%d8%ac%db%8c/">باب اسفنجی</a></li>
                                            <li><a href="http://2day.hisend.ir/hello-world/">Hello world!</a></li>
                                            <li><a href="http://2day.hisend.ir/%d9%81%d9%88%d8%aa%d8%a8%d8%a7%d9%84-%d9%84%db%8c%d9%86%d8%ac%d8%a7%d9%86/">فوتبال لینجان</a></li>
                                            <li><a href="http://2day.hisend.ir/%d8%af%d9%84%d8%a7%d8%b1/">دلار</a></li>
                                            <li><a href="http://2day.hisend.ir/%d8%b3%db%8c%d9%86%d9%85%d8%a7-%d9%86%d8%a8%d8%a7%d8%b4%d8%af-%d8%af%d9%86%db%8c%d8%a7-%d9%86%db%8c%d8%b3%d8%aa/">سینما نباشد دنیا نیست</a></li>

                                </ul>
                            </div>

这是我的jQuery代码：

    $(document).ready(function(){   

        $(function() {
                $( "#best_tabs" ).tabs();
                });

    });

这是我的网站链接

正如你在上面的链接中看到的，两个选项卡都没有起作用。

- Hussein Ojaghi

1

你在HTML页面中是否包含了JqueryUI的JavaScript文件？ - Sidney Gijzen

是的，我包括了jQuery和jQuery UI。 - Hussein Ojaghi

我刚在控制台中尝试了$( "#best_tabs" ).tabs(); 并且它起作用了。这意味着你做得一切都正确，但是该函数在jquery或jqueryUI加载之前就被运行了。问题是竞争条件。 - im_benton

添加你如何调用你的脚本标签。 - im_benton

jQuery和jQuery UI在我的代码之上，而且我用$(document).ready函数包装了代码。 - Hussein Ojaghi

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Suu · Accepted Answer

<div id="best_tabs">
                    <ul class="clearfix">
                        <li><a href="#tab_1">جدیدترین</a></li>
                        <li><a href="#tab_2">محبوب ترین</a></li>
                    </ul>
                        <div id="tab_1">
                            <ul>
                                                                                        <li><a href="http://2day.hisend.ir/post-the-next-day/">post the next day</a></li>
                                <li><a href="http://2day.hisend.ir/post-the-next-day/">post the next day</a></li>
                                <li><a href="http://2day.hisend.ir/entire-post/">entire post</a></li>
                                <li><a href="http://2day.hisend.ir/entire-post/">entire post</a></li>
                                <li><a href="http://2day.hisend.ir/hello-world/">Hello world!</a></li>
                                <li><a href="http://2day.hisend.ir/hello-world/">Hello world!</a></li>
                                <li><a href="http://2day.hisend.ir/%d8%b4%d8%b1%da%a9%d8%aa-%d9%86%d9%81%d8%aa-%d8%a7%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-%d9%85%db%8c-%da%a9%d9%86%d8%af/">شرکت نفت استخدام می کند</a></li>
                                <li><a href="http://2day.hisend.ir/%d8%b4%d8%b1%da%a9%d8%aa-%d9%86%d9%81%d8%aa-%d8%a7%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-%d9%85%db%8c-%da%a9%d9%86%d8%af/">شرکت نفت استخدام می کند</a></li>
                                <li><a href="http://2day.hisend.ir/%d8%af%d8%a7%d9%86%d9%84%d9%88%d8%af-%d9%85%d9%88%d8%b2%db%8c%da%a9-%d8%a7%d8%a8%d8%b1%d8%a7%d9%87%db%8c%d9%85-%d9%be%d8%a7%d8%b1%d8%b3/">دانلود موزیک ابراهیم پارس</a></li>
                                <li><a href="http://2day.hisend.ir/%d8%af%d8%a7%d9%86%d9%84%d9%88%d8%af-%d9%85%d9%88%d8%b2%db%8c%da%a9-%d8%a7%d8%a8%d8%b1%d8%a7%d9%87%db%8c%d9%85-%d9%be%d8%a7%d8%b1%d8%b3/">دانلود موزیک ابراهیم پارس</a></li>
                                <li><a href="http://2day.hisend.ir/%d8%af%d9%86%db%8c%d8%a7%db%8c-%d9%85%d8%a8%d8%aa%d9%86%db%8c-%d8%a8%d8%b1-%d8%b3%db%8c%d9%86%d9%85%d8%a7/">دنیای مبتنی بر سینما</a></li>
                                <li><a href="http://2day.hisend.ir/%d8%af%d9%86%db%8c%d8%a7%db%8c-%d9%85%d8%a8%d8%aa%d9%86%db%8c-%d8%a8%d8%b1-%d8%b3%db%8c%d9%86%d9%85%d8%a7/">دنیای مبتنی بر سینما</a></li>
                                <li><a href="http://2day.hisend.ir/%d8%b3%db%8c%d9%86%d9%85%d8%a7-%d9%86%d8%a8%d8%a7%d8%b4%d8%af-%d8%af%d9%86%db%8c%d8%a7-%d9%86%db%8c%d8%b3%d8%aa/">سینما نباشد دنیا نیست</a></li>
                                <li><a href="http://2day.hisend.ir/%d8%b3%db%8c%d9%86%d9%85%d8%a7-%d9%86%d8%a8%d8%a7%d8%b4%d8%af-%d8%af%d9%86%db%8c%d8%a7-%d9%86%db%8c%d8%b3%d8%aa/">سینما نباشد دنیا نیست</a></li>
                                <li><a href="http://2day.hisend.ir/%d8%a8%d8%a7%d8%a8-%d8%a7%d8%b3%d9%81%d9%86%d8%ac%db%8c/">باب اسفنجی</a></li>
                                <li><a href="http://2day.hisend.ir/%d8%a8%d8%a7%d8%a8-%d8%a7%d8%b3%d9%81%d9%86%d8%ac%db%8c/">باب اسفنجی</a></li>
                                <li><a href="http://2day.hisend.ir/%d9%81%d9%88%d8%aa%d8%a8%d8%a7%d9%84%db%8c%d8%b3%d8%aa-%d9%87%d8%a7/">فوتبالیست ها</a></li>
                                <li><a href="http://2day.hisend.ir/%d9%81%d9%88%d8%aa%d8%a8%d8%a7%d9%84%db%8c%d8%b3%d8%aa-%d9%87%d8%a7/">فوتبالیست ها</a></li>
                                <li><a href="http://2day.hisend.ir/%d9%81%d9%88%d8%aa%d8%a8%d8%a7%d9%84-%d9%84%db%8c%d9%86%d8%ac%d8%a7%d9%86/">فوتبال لینجان</a></li>
                                <li><a href="http://2day.hisend.ir/%d9%81%d9%88%d8%aa%d8%a8%d8%a7%d9%84-%d9%84%db%8c%d9%86%d8%ac%d8%a7%d9%86/">فوتبال لینجان</a></li>
                                <li><a href="http://2day.hisend.ir/%d8%b3%d9%88%d9%86%db%8c%da%a9/">سونیک</a></li>
                                <li><a href="http://2day.hisend.ir/%d8%b3%d9%88%d9%86%db%8c%da%a9/">سونیک</a></li>
                                <li><a href="http://2day.hisend.ir/%d9%85%d8%a7-%d8%ae%d9%88%d8%a7%d8%b3%d8%aa%d8%a7%d8%b1-%d8%b5%d9%84%d8%ad-%d9%87%d8%b3%d8%aa%db%8c%d9%85/">ما خواستار صلح هستیم</a></li>
                                <li><a href="http://2day.hisend.ir/%d9%85%d8%a7-%d8%ae%d9%88%d8%a7%d8%b3%d8%aa%d8%a7%d8%b1-%d8%b5%d9%84%d8%ad-%d9%87%d8%b3%d8%aa%db%8c%d9%85/">ما خواستار صلح هستیم</a></li>
                                <li><a href="http://2day.hisend.ir/%d8%aa%d8%a7-%d8%ae%d9%88%d9%86-%d8%af%d8%b1-%d8%b1%da%af-%d9%85%d8%a7%d8%b3%d8%aa/">تا خون در رگ ماست</a></li>
                                <li><a href="http://2day.hisend.ir/%d8%aa%d8%a7-%d8%ae%d9%88%d9%86-%d8%af%d8%b1-%d8%b1%da%af-%d9%85%d8%a7%d8%b3%d8%aa/">تا خون در رگ ماست</a></li>
                                <li><a href="http://2day.hisend.ir/%d8%b3%db%8c%d8%b3%d8%a7%d8%b3%d8%aa-%d9%88%d8%a7%d8%ad%d8%af/">سیساست واحد</a></li>
                                <li><a href="http://2day.hisend.ir/%d8%b3%db%8c%d8%b3%d8%a7%d8%b3%d8%aa-%d9%88%d8%a7%d8%ad%d8%af/">سیساست واحد</a></li>
                                <li><a href="http://2day.hisend.ir/%d8%a7%d8%ae%d8%a8%d8%a7%d8%b1-%d8%ac%d8%af%db%8c%d8%af/">اخبار جدید</a></li>
                                <li><a href="http://2day.hisend.ir/%d8%a7%d8%ae%d8%a8%d8%a7%d8%b1-%d8%ac%d8%af%db%8c%d8%af/">اخبار جدید</a></li>

                            </ul>
                        </div>
                        <div id="tab_2">

                                <ul>

                                                                <li><a href="http://2day.hisend.ir/%d9%85%d8%a7-%d8%ae%d9%88%d8%a7%d8%b3%d8%aa%d8%a7%d8%b1-%d8%b5%d9%84%d8%ad-%d9%87%d8%b3%d8%aa%db%8c%d9%85/">ما خواستار صلح هستیم</a></li>
                                        <li><a href="http://2day.hisend.ir/%d8%b4%d8%b1%da%a9%d8%aa-%d9%86%d9%81%d8%aa-%d8%a7%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-%d9%85%db%8c-%da%a9%d9%86%d8%af/">شرکت نفت استخدام می کند</a></li>
                                        <li><a href="http://2day.hisend.ir/%d8%af%d9%86%db%8c%d8%a7%db%8c-%d9%85%d8%a8%d8%aa%d9%86%db%8c-%d8%a8%d8%b1-%d8%b3%db%8c%d9%86%d9%85%d8%a7/">دنیای مبتنی بر سینما</a></li>
                                        <li><a href="http://2day.hisend.ir/%d8%af%d8%a7%d9%86%d9%84%d9%88%d8%af-%d9%85%d9%88%d8%b2%db%8c%da%a9-%d8%a7%d8%a8%d8%b1%d8%a7%d9%87%db%8c%d9%85-%d9%be%d8%a7%d8%b1%d8%b3/">دانلود موزیک ابراهیم پارس</a></li>
                                        <li><a href="http://2day.hisend.ir/%d8%aa%d8%a7-%d8%ae%d9%88%d9%86-%d8%af%d8%b1-%d8%b1%da%af-%d9%85%d8%a7%d8%b3%d8%aa/">تا خون در رگ ماست</a></li>
                                        <li><a href="http://2day.hisend.ir/%d8%a8%d8%a7%d8%a8-%d8%a7%d8%b3%d9%81%d9%86%d8%ac%db%8c/">باب اسفنجی</a></li>
                                        <li><a href="http://2day.hisend.ir/hello-world/">Hello world!</a></li>
                                        <li><a href="http://2day.hisend.ir/%d9%81%d9%88%d8%aa%d8%a8%d8%a7%d9%84-%d9%84%db%8c%d9%86%d8%ac%d8%a7%d9%86/">فوتبال لینجان</a></li>
                                        <li><a href="http://2day.hisend.ir/%d8%af%d9%84%d8%a7%d8%b1/">دلار</a></li>
                                        <li><a href="http://2day.hisend.ir/%d8%b3%db%8c%d9%86%d9%85%d8%a7-%d9%86%d8%a8%d8%a7%d8%b4%d8%af-%d8%af%d9%86%db%8c%d8%a7-%d9%86%db%8c%d8%b3%d8%aa/">سینما نباشد دنیا نیست</a></li>

                            </ul>
                        </div>
</div>