Най-добрия вариант за смяна на информацията

S

sentenello

Registered
Здравейте,
В една страница имам 3 таба с информация. съответно 1х2, Over, HT/FT.

В момента ми извежда само 1х2, искам без презареждане да мога да сменям на другите 2 полета. Сещам се за 2 варианта. Единия вариант е направо във пхп файла да си изведа резултатите за 3-те, като дам hide на двете които не ми трябват и когато се кликне на някой друг таб, да сменя hide.. Втория вариант е да го направя с GET..

Кое според вас е най-добре, и ако може да ми дадете някакъв урок където е описано в лесни стъпки как се прави.
 
Само с css, като за урок има доста излишни стилове, но - http://www.onextrapixel.com/2013/07/31/creating-content-tabs-with-pure-css/
 
Това е страхотен урок, само че ако не се лъжа при смяната на табовете, няма да обновява информацията ако има нещо променено.

В момента се опитвам да го направя с ajax, като кода който ползвам е
Код: 
 $(function() {
    $(".OverUnder").click(function(){
	$(this).removeClass('OverUnder');
   $(this).addClass('OverUnder2');
            var ligata = 'Over/Under';
            $.ajax({
               url: "overunderdrop.php",
               type: "POST",
               data: { 'ligata': ligata},
               success: function(result){
                  $(".ligainfo").show().html(result);
                  }
            });
            return false;
         });
               });
Единствения ми проблем в момента е как при натискането на OverUnder, да преправя класовете на другите 2 таба. Това го питам, защото така целя да сменям class на активния в момента таб. Мисля че имаше и някакъв друг вариант ама не се сещам какъв е.

П.С. Прав ли съм, че само с css няма да обновява информацията при сменянето на табовете ?
 
П.С. Прав ли съм, че само с css няма да обновява информацията при сменянето на табовете ?
Увеличете...
Хехе, не очаквай css да прави ajax заявки :D:D

Ако искаш да се обновява при клик на таб, наистина ще ти трябва js.

Да приемем, че имаш класове .tab-click и .tab-content съответно за цъканката и за съдържанието. На всеки .tab-click му слагаш някво id, а на всеки .tab-content слагаш data-tabclick="id-то на съответния .tab-click"

HTML: 
<div class="tab-click" id="div-one"> Първа част</div>
<div class="tab-click" id="div-two"> Втора част</div>
<div class="tab-click" id="div-three"> Трета част</div>

<div class="tab-content" data-tabclick="div-one">Съдържание на част 1</div>
<div class="tab-content" data-tabclick="div-two">Съдържание на част 2</div>
<div class="tab-content" data-tabclick="div-three">Съдържание на част 3</div>
И сега просто:

[js]$('.tab-click').click(function(){
var id = $(this).attr('id'); //взимаме id-to на цъкнатия tab-click
$('.tab-content').hide() // скриваме всички tab-content
.find('[data-tabclick='+id+']') // намираме този, чийто data-tabclick атрибут съответства на id-то
.load('/get-tab-content.php?id=' + id) // зареждаме в него съдържанието, генерирано от php файла (това е съкратен вариант на .ajax())
.show(); // показваме го
});[/js]

Така при всеки клик ще се зарежда наново инфото в .tab-content :?:
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе