Не сработал не один из вариантов, кроме тех что у меня были. А что на счёт вопрос об имени id селектора? Ниже весь код html - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>New Beautyfull Tabs from Belyash</title> <link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".selectTabs").each(function () { var tmp = $(this); console.log($(tmp).find(" .lineTabs li")); $(tmp).find(".lineTabs li").each(function (i) { $(tmp).find(".lineTabs li:eq("+i+") a").click(function(){ var tab_id=i+1; $(tmp).find(".lineTabs li a").removeClass("active"); $(this).addClass("active"); $(tmp).find(".content div").stop(false,false).hide(); $(tmp).find(".tab"+tab_id).stop(false,false).show(); return false; }) }) }) }) </script> </head> <body> <div id="wrap"> <div class="selectTabs"> <ul class="lineTabs"> <li><a id='tabname_6' href="#" class="active">HOMEPAGE</a></li> <li><a id='tabname_5' href="#">HERBS</a></li> <li><a id='tabname_4' href="#">TEAS</a></li> <li><a id='tabname_3' href="#">SPICE</a></li> <li><a id='tabname_2' href="#">AROMATHERAPY</a></li> <li><a id='tabname_1' href="#">SHOPPING GUIDE</a></li> </ul> <div class="content"> <div class="tab1"> <h3>Напишите мне</h3> <form action="#"> <label for="name">Ваше имя</label><br /> <input name="name" type="text" /><br /> <label for="email">Ваш E-mail</label><br /> <input name="email" type="text" /><br /> <label for="comment"">Текст сообщения</label><br /> <textarea name="comment"></textarea> </form> </div> <div class="tab2"> <h3>Contrary to popular</h3> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p> <h3>Richard McClintock</h3> <p>Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.</p> <h3>Lorem Ipsum</h3> <p>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p> </div> <div class="tab3"> <img src="images/giraf.jpg" /> </div> <div class="tab4" style="display:block;"> <img src="images/zayac.jpg" style="float: left; padding-right: 15px;" /> <p>Зайцы (лат. Leporidae) — семейство млекопитающих из отряда зайцеобразных, включающее в себя собственно зайцев (главным образом род Lepus, но также Pronolagus и Caprolagus) и кроликов (остальные роды). Зайцы распространены по всему миру, кроме Австралии и отдаленных островов, на многие из которых ввезены людьми. Отличаются от пищух развитыми задними конечностями, длинными ушами и наличием короткого хвоста.</p> </div> </div> </div> </div> <div style="position: absolute; bottom: 5px; left: 5px;"> <a style="color: rgb(27, 100, 220); font: 12px arial;" href="http://web4develop.ru">web4develop.ru</a> </div> </body> </html> css- html, body{ background:#aaa url(images/bg.png); color:#00557F; font:normal 14px Verdana; margin:0px; padding:0px; } h3{ border-bottom:1px solid #4c9ac3; } form, label, input, textarea{ font-size:11px; } input{ background:#BBD9FA; border:1px solid #4c9ac3; height:12px; margin:0px 0px 5px 0px; width:150px; } textarea{ background:#BBD9FA; border:1px solid #4c9ac3; height:36px; width:460px; } #wrap{ margin:30px auto; width:1000px; } .lineTabs{ height:30px; list-style:none; margin:0px auto; padding:0px; padding-right:30px; padding-left:10px; width:auto; } .lineTabs li{ display:block; float:right; margin:0px; padding:0px; position:relative; overflow:visible; text-align:center; width:110px; } .lineTabs li a{ background-repeat: no-repeat; color:#600; display:block; font:normal 14px Verdana; height:46px; margin:0px -10px; outline:none; padding:7px 20px; position:relative; text-decoration:none; width:90px; } .lineTabs li a.active{ background-repeat: no-repeat; color: #600; font-weight: bold; } .lineTabs li a:hover{ color: #600; font-weight: bold; } .active {background-repeat: no-repeat;} #element {background: url('something.png') no-repeat;} #tabname_1.active{ background:url(images/ShoppingGuide.png); } #tabname_2.active{ background:url(images/Aromatherapy.png); } #tabname_3.active{ background:url(images/Spise.png); } #tabname_4.active{ background:url(images/Teas.png); } #tabname_5.active{ background:url(images/Herbs.png); } #tabname_6.active{ background:url(images/Homepage.png); } .content{ background:white; border:1px solid #4c9ac3; display:block; float:left; clear:left; height:auto; margin:0px; padding:10px; position:relative; text-align:justify; width:460px; } .content div{ background:white; display:none; height:auto; float:left; clear:both; left:0px; margin:0px; padding:0px; position:static; top:0px; width:100%; } .content div p{ margin:5px 0px; padding:0px; } .selectTabs{ float:left; margin:5px; }
