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

سلام دوستان من می خوام با جی کوئری تب ایجاد کنم ولی کدهای به ظاهر درست من کار نمیکنند خیلی تو نت سرچ کردم همه همین طوری کد استفاده می کردند نمیدونم اشکال کارم کجاست لطفا راهنمایی کنید ممنونم
کد 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 شه عکس دوم نمایش داده شه

ممنونم

به نظرم بهتره ساختار 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 من جواب نمیگیرم ؟

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

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

نقل قول:

---

نوشته شده توسط younesdoost

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

---

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