JavaScript Effect Tab

E

extremebg

Registered
Здравейте, от скоро се занимавам с web дизайн, и все оше съм нов в javascript и за това търся помощ за един ефект.

Харесах един ефект от този сайт http://www.desheli.com/products/uhod-posle-35/
Като кликна на продуктите отдолу над тях се смяня div-a с информация за продукта . Интерсното за мен е че адреса в адрес бара не се променя.

Опитах да копитам кода

Код: 
	<div class="cat">
				
				<img class="png item" src="Crystal%20Youth%20Anti-Age%20-%20DESHELI_files/black.png" alt="" title="">
				<div class="group" style="color:#000;">
					<h1><strong><span style="color: #000000; font-family: trebuchet ms,geneva; font-size: large;">Красота и свежесть!</span></strong></h1>
<span style="color: #000000;">
«Умные кристаллы» сохраняют молодость кожи и
эффективно борются с признаками старения,
возвращая юный, свежий вид! Запуская
клеточные процессы вспять, средства
DeSheli придают Вашей коже сияние, тонус и
упругость. Ваша кожа становится моложе
на 10 лет и сохраняет свою структуру
длительное время!</span>
				</div>
			</div>
			<div class="shadow"></div>
		</div>
	</div>
	<div id="content">
		<div class="frame" style="overflow:hidden;">
			<div class="page">
				<div class="line light">
                                        <div style="overflow: hidden;" class="cat png" id="scroll-pane">
                 			        <ul class="scroll-content" style="width:2720px;">
                                                    <li class="scroll-content-item">
                                                        <div class="content-item2">
                                                            <a href="http://www.desheli.com/products/uhod-posle-35/">
	                                                        <img class="png" src="Crystal%20Youth%20Anti-Age%20-%20DESHELI_files/blackcase.png" alt="" title=""><span>CRYSTAL YOUTH ANTI-AGE Full Line</span>
                                                            </a>
                                                        </div>
                                                    </li>
<li class="scroll-content-item">
    <div class="content-item">
        <a href="http://www.desheli.com/products/uhod-posle-35/#z" id="104">
            <img class="png" src="Crystal%20Youth%20Anti-Age%20-%20DESHELI_files/Milk.png" alt="" title="CRYSTAL YOUTH ANTI-AGE Cleansing Milk">
            <span>CRYSTAL YOUTH ANTI-AGE Cleansing Milk</span>
        </a>
    </div>
</li>
<li class="scroll-content-item">
    <div class="content-item">
        <a href="http://www.desheli.com/products/uhod-posle-35/#z" id="105">
            <img class="png" src="Crystal%20Youth%20Anti-Age%20-%20DESHELI_files/Scrub.png" alt="" title="CRYSTAL YOUTH ANTI-AGE Delicate Scrub">
            <span>CRYSTAL YOUTH ANTI-AGE Delicate Scrub</span>
        </a>
    </div>
</li>
<li class="scroll-content-item">
<div class="content-item">
 <a href="http://www.desheli.com/products/uhod-posle-35/#z" id="106">
 <img class="png" src="Crystal%20Youth%20Anti-Age%20-%20DESHELI_files/Mud_mask.png" alt="" title="CRYSTAL YOUTH ANTI-AGE Beauty Mud Mask">
 <span>CRYSTAL YOUTH ANTI-AGE Beauty Mud Mask</span>

</a>
</div>
</li><li class="scroll-content-item">
<div class="content-item">
 <a href="http://www.desheli.com/products/uhod-posle-35/#z" id="107">
 <img class="png" src="Crystal%20Youth%20Anti-Age%20-%20DESHELI_files/Tonic.png" alt="" title="CRYSTAL YOUTH ANTI-AGE Phyto Tonic">
 <span>CRYSTAL YOUTH ANTI-AGE Phyto Tonic</span>
</a>
</div>
</li><li class="scroll-content-item">
<div class="content-item">
 <a href="http://www.desheli.com/products/uhod-posle-35/#z" id="108">
 <img class="png" src="Crystal%20Youth%20Anti-Age%20-%20DESHELI_files/Serum.png" alt="" title="CRYSTAL YOUTH ANTI-AGE Collagen Serum">
 <span>CRYSTAL YOUTH ANTI-AGE Collagen Serum</span>
</a>
</div>
</li><li class="scroll-content-item">
<div class="content-item">
 <a href="http://www.desheli.com/products/uhod-posle-35/#z" id="109">
 <img class="png" src="Crystal%20Youth%20Anti-Age%20-%20DESHELI_files/Day_cream.png" alt="" title="CRYSTAL YOUTH ANTI-AGE Moisturizing Day Cream SPF 15">
 <span>CRYSTAL YOUTH ANTI-AGE <span style="font-size:11px;">Moisturizing Day Cream SPF 15</span></span>
</a>

</div>
</li><li class="scroll-content-item">
<div class="content-item">
 <a href="http://www.desheli.com/products/uhod-posle-35/#z" id="110">
 <img class="png" src="Crystal%20Youth%20Anti-Age%20-%20DESHELI_files/Night_cream.png" alt="" title="CRYSTAL YOUTH ANTI-AGE Phyto Night Cream">
 <span>CRYSTAL YOUTH ANTI-AGE Phyto Night Cream</span>
</a>
</div>
</li><li class="scroll-content-item">
<div class="content-item">
 <a href="http://www.desheli.com/products/uhod-posle-35/#z" id="111">
 <img class="png" src="Crystal%20Youth%20Anti-Age%20-%20DESHELI_files/Eye_gel.png" alt="" title="CRYSTAL YOUTH ANTI-AGE Anti-wrinkle Eye Gel">

 <span>CRYSTAL YOUTH ANTI-AGE Anti-wrinkle Eye Gel</span>
</a>
</div>
</li><li class="scroll-content-item">
<div class="content-item">
 <a href="http://www.desheli.com/products/uhod-posle-35/#z" id="112">
 <img class="png" src="Crystal%20Youth%20Anti-Age%20-%20DESHELI_files/Liposome.png" alt="" title="CRYSTAL YOUTH ANTI-AGE Active Liposome Gel">
 <span>CRYSTAL YOUTH ANTI-AGE Active Liposome Gel</span>
</a>
</div>
</li><li class="scroll-content-item">

<div class="content-item">
 <a href="http://www.desheli.com/products/uhod-posle-35/#z" id="113">
 <img class="png" src="Crystal%20Youth%20Anti-Age%20-%20DESHELI_files/Anticellulit.png" alt="" title="CRYSTAL YOUTH ANTI-AGE Firming Anti-cellulite Gel">
 <span>CRYSTAL YOUTH ANTI-AGE Firming Anti-cellulite Gel</span>
</a>
</div>
</li>

</ul>

[js] <script type="text/javascript">
jq('.content-item a').click(function() {
jq.ajax({
url: '/ajaxdata.html',
type: 'POST',
data: 'id=' + jq(this).attr('id'),
beforeSend: function(html) {
},
success: function(html) {
jq('#center .page .poster-light .png').hide();
jq('#center .page .cat').html(html);
jq('#tabs').tabs();
}
});
});
jq('.forward').click(function () {
if ((itemsLeft + 15) <= 100) itemsLeft = itemsLeft + 15; else itemsLeft = 100;
jq(".scroll-bar").slider("value", itemsLeft);

itemsMarginLeft = parseInt(jq(".scroll-content").css('margin-left'));
if ((itemsMarginLeft - 247) >= -1729) {
jq(".scroll-content").css('margin-left', itemsMarginLeft - 247 + 'px');
} else {
jq(".scroll-content").css('margin-left', '-1729px');
}
});
jq('.reward').click(function () {
if ((itemsLeft - 15) >= 0) itemsLeft = itemsLeft - 15; else itemsLeft = 0;
jq(".scroll-bar").slider("value", itemsLeft);

itemsMarginLeft = parseInt(jq(".scroll-content").css('margin-left'));
if ((itemsMarginLeft + 247) <= 0) {
jq(".scroll-content").css('margin-left', itemsMarginLeft + 247 + 'px');
} else {
jq(".scroll-content").css('margin-left', '0px');
}
});
</script>
[/js]

Ето и кода на ajaxdata.html



Код: 
<img class="png item" src="#" alt="" title="" />
<div id="tabs" class="tabs png">
    <ul>
	<li><a href="#tabs-1">Описание</a></li>
	<li><a href="#tabs-2">Применение</a></li>
	<li><a href="#tabs-3">Комментарии</a></li>
    </ul>
    <div id="tabs-1" class="png">
	<h1></h1>
	    </div>
    <div id="tabs-2" class="hidden png">
            </div>
    <div id="tabs-3" class="hidden png">
        	
    </div>
</div>

Като заредя страницата нищо не става .
Ако може някой да ми посочи грешката ми .
 
Като зачетох по-внимателно кода на две страници главната и на един продукт с tab-ове единстверната разлика беше, че този код се появява след <div class="cat">

Код: 
<img class="png item" src="Crystal%20Youth%20Anti-Age%20-%20DESHELI%202_files/Scrub1.png" alt="" title="">
<div id="tabs" class="tabs png ui-tabs ui-widget ui-widget-content ui-corner-all">
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
	<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Описание</a></li>
	<li class="ui-state-default ui-corner-top"><a href="#tabs-2">Применение</a></li>
	<li class="ui-state-default ui-corner-top"><a href="#tabs-3">Комментарии</a></li>
    </ul>
    <div id="tabs-1" class="png ui-tabs-panel ui-widget-content ui-corner-bottom">
	<h1>CRYSTAL YOUTH ANTI-AGE Delicate Scrub,125 мл</h1>
	
<p><strong>Скраб.</strong> ББББББ</p>    </div>
    <div id="tabs-2" class="hidden png ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
        
ААААААААА<br>    </div>
    <div id="tabs-3" class="hidden png ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
        ЦЦЦЦЦЦЦЦ	
    </div>
</div>
</div>

Как да постигна това без да се налага да правя отделна страница за всеки продукт ?
 
Самите продукти с слагат в индивидуални див-ове и после с jquery се прави така,че дадения (кликнатия див) се появява в горния див (прозореца)...
За сега толкова мога да кажа.
 
Като гледам в кода ui-tabs-panel и други подобни, явно ползват това: http://jqueryui.com/tabs/ :)
 
Оправих се горе долу с jQuery скрипта, но имам нужда от малко помощ.
Направих различните продукти в отделни дививе с различни id номера както е видно ТУК

Табовете се показаха, но в тях няма текст, също така картинката която е в ляво от тях също не се зарежда , не взима правилния url на картинката.

Къде точно трябва да се постави текста за всеки отделен таб, понеже за всеки един продукт ще има различен текст в табовете.


Благодаря за помощта
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе