Jak uzyskać taki efekt ?

Question

Witam. Robię dla znajomego prostą stronę ( tematyka mało ważna ).

Otóż chodzi mi o to, jak uzyskać taki efekt jak na tej stronie : http://boosting24.com/rank-boost  ??

Chodzi mi o prosty kod, dwie tabele, z lewej gdy wybiorę jakąś opcję to wyżej pojawi się obrazek - z prawej to samo.

Na dole natomiast cena. Macie jakieś pomysły ? Dodam że nie bawie sie w HTML jakoś profesjonalnie, ale coś tam napisać umiem. Nie mogę zrobić właśnie czegoś podobnego.

 

Z góry dzięki za pomoc, pozdrawiam!

Answer 1

Funkcja onclick() na button i nastepnie w jquery

function nazwa_funkcji() {

$(this).show lub .aimate

}

http://api.jquery.com/show/

Comments

<button onclick="pokaz()">tekst</button>

 

<script>

function pokaz() {

$('.cena-lewa-tabela').show();

$('.obrazek-lewa-tabela').show();

}

 </script>
analogicznie z prawa

---

Zrobiłem coś takiego :

 

                            <select id="rank" name="current_rank">
                                <option value="Chose" selected><button>Chose Rank</option>
                                <option value="Silver I" id="s1">Silver I</option>
                                <option value="Silver II" id="s2">Silver II</option>
                                <option value="Silver III" id="s3">Silver III</option>
                                <option value="Silver IV" id="s4">Silver IV</option>
                                <option value="Silver V" id="s5">Silver V</option>
                            </select>
                            
                            <p style="display: none">222</p>
 
                            <script>
                            $( "s1" ).click(function() {
                                $( "p" ).show( "slow" );
                                });
                            </script>

 

ale jak już wspominałem, mało to ogarniam i nie wiem jak to zrobić :/ zapewne do każdej rangi musze dodać kolejny script, tak ? Jeżeli nawet to nie wiem jak to podpisac pod <option>. Jakieś sugestie ?

---

do head jeszcze wpisz <script src="http://code.jquery.com/jquery-2.1.4.min.js”></script>

przy id zamiast . jest # kropke stosuje sie przy klasach

przyklad podobny do twojego http://jsfiddle.net/FvMYz/

---

Nie polecajmy [onclick]! https://www.pornel.net/onclick

Answer 2

Znalazłem dokładnie to samo, troche sie pobawie i może wyjdzie mi "wymarzony" efekt :p

Dzięki wielkie za pomoc, pozdrawiam.

Comments

Polecam się na przyszłóść