ایجاد تب با جی کوئری

[نیکناز]

سلام دوستان من می خوام با جی کوئری تب ایجاد کنم ولی کدهای به ظاهر درست من کار نمیکنند خیلی تو نت سرچ کردم همه همین طوری کد استفاده می کردند نمیدونم اشکال کارم کجاست لطفا راهنمایی کنید ممنونم
کد html :

<table>

  	        <tbody><tr>

  	            <td id="slide">

                                                                          

                        <a>

                         

                            <div>

                            tab1

                            </div>

                        </a>

                                                                          

                        <a>

                         

                            <div>

                            tab2

                            </div>

                        </a>

                    

                </td>

  	            <td>

                    <div class="tabs"  >

                        

                            <div class="tab_1">

                                <a>

                                    <img src="th.jpg">

                                </a>

                            </div>

                        

                            <div class="tab_2">

                                <a>

                                    <img src="1.jpg">

                                </a>

                            </div>

                                               

                    </div>

                </td>

  	        </tr>

  	    </tbody></table>

کد جی کوئری من:

$(document).ready(function () {

$("#slide").tabs("div.tabs", { event: 'mouseover' });

});

من می خوام وقتی رو تب 1 رفتم عکس اول و وقتی رو عکس دوم رفتم display عکس اول none شه عکس دوم نمایش داده شه

ممنونم

[p.parsaee]

به نظرم بهتره ساختار html رو از روی مثالی که تو سایت jqueryui هست (اینجا رو کلیک کن) قرار بدی. مثلا:

<div class="slide">

        <ul>

            <li><a href="#tabs-1">tab1</a></li>

            <li><a href="#tabs-2">tab2</a></li>

        </ul>

        <div id="tabs-1">

            <a><img src="brushed_alu.png"></a>

        </div>

        <div id="tabs-2">

            <a><img src="2004acc55dea434.gif"></a>

        </div>

    </div>

اسکریپت مربوطه هم به این صورت هست:

$(document).ready(function () {

            $(".slide").tabs({ event: 'mouseover' });

        });

[نیکناز]

مرسی دوست عزیزم
چرا با این ساختار html من جواب نمیگیرم ؟

[p.parsaee]

خواهش می کنم. از اینکه دیر جواب دادم عذر خواهی می کنم. باید صفت href مربوط به تگ a رو مقداردهی می کردی. همچنین خود jquery ui پیشنهاد کرده که از تگهای ul و li استفاده کنیم. شما از table و tr و td استفاده کردید. البته تست نکردم ببینم که با تگ table کار میکنه یا نه ولی خوب href تگ a باید به id تگ div مربوطه مقداردهی بشه

[younesdoost]

بهتره از Bootstrap استفاده کنید که مزیتش نسبت به jqueryui و غیره اینه که bootstrap یک فریم ورکه.

[نیکناز]

بهتره از Bootstrap استفاده کنید که مزیتش نسبت به jqueryui و غیره اینه که bootstrap یک فریم ورکه.

مرسی دوست عزیزم
امکانش هست بیشتر برام توضیح بدی ؟