Forum PHP.pl > Zmiana wygladu po klknieciu w link

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Zmiana wygladu po klknieciu w link

Forum PHP.pl > Forum > Po stronie przeglądarki

JamalBIG

2.05.2009, 12:50:51

Witam

W internecie znalazlem fajny i nieskaplikowany skrypt zakladek, teraz chcialbym go troche zmienic i dodac efekt 'klkniecia' - chodzi mi o to aby po klknieciu w 'tytul' zakladki nazwa byla pogrubiona i miala inny kolor... Ponizej przedstawiam wspomniany skrypt:

Kod

<html>
<head>
     <script type="text/javascript" src="tab.js"></script>
     <title>Zakładki w Ajaxie - VBartek.pl - Porady webmasterskie</title>
     <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />

<style type="text/css">
*{ margin: 0; padding: 0; }
body{ font: 13px Arial, Verdana; color: #fff; padding: 20px; }
ul#tab-container-1-nav li{ display: inline; }
ul#tab-container-1-nav li a{ padding: 5px 10px; background: #eee; border: 1px solid #ddd; color: #25252E; text-decoration: none; }

.tab{ margin-top: 8px; padding: 10px; background: #eee; border: 1px solid #ddd; }
#tab1{ background: #545461; }
#tab2{ background: #9F8672; }
</style>
</head>
<body>

<div id="tab-container-1">

     <ul id="tab-container-1-nav">
     <li><a href="#tab1">Zakładka 1</a></li>
     <li><a href="#tab2">Zakładka 2</a></li>
     </ul>

     <div class="tab" id="tab1">
     <h2>Nagłówek, zakładka 1</h2>

     <p>1// Przykładowy tekst. Lorem ipsum dolem mitum, lorem ipsum dolem mitum.
     Lorem ipsum dolem mitum, lorem ipsum dolem mitum. Lorem ipsum dolem mitum,
     lorem ipsum dolem mitum. Lorem ipsum dolem mitum, lorem ipsum dolem mitum.
     Lorem ipsum dolem mitum, lorem ipsum dolem mitum. Lorem ipsum dolem mitum,
     lorem ipsum dolem mitum. Lorem ipsum dolem mitum, lorem ipsum dolem mitum.
     Lorem ipsum dolem mitum, lorem ipsum dolem mitum. </p>
     </div>

     <div class="tab" id="tab2">
     <h2>Nagłówek, zakładka 2</h2>
     <p>2// Przykładowy tekst. Lorem ipsum dolem mitum, lorem ipsum dolem mitum.
     Lorem ipsum dolem mitum, lorem ipsum dolem mitum. Lorem ipsum dolem mitum,
     lorem ipsum dolem mitum. Lorem ipsum dolem mitum, lorem ipsum dolem mitum.
     Lorem ipsum dolem mitum, lorem ipsum dolem mitum. Lorem ipsum dolem mitum,
     lorem ipsum dolem mitum. Lorem ipsum dolem mitum, lorem ipsum dolem mitum.
     Lorem ipsum dolem mitum, lorem ipsum dolem mitum. </p>
     </div>

</div>

<script type="text/javascript">
var tabber1 = new Yetii({
id: 'tab-container-1'
});
</script>

</body>
</html>

outsider

2.05.2009, 15:22:03

[HTML] pobierz, plaintext 
<li><a href="#tab1" onClick="this.style.color='black';this.style.fontWeight=700;">Zakładka 1</a></li>
[HTML] pobierz, plaintext

moze byc tak ?

JamalBIG

8.05.2009, 23:20:14

Wszystko pieknie ale jeszcze jak bys mi podpowiedzil co zrobic zeby kiedy klikne w druga zakladke ta pierwsza sie 'odznaczyla'

outsider

10.05.2009, 11:48:36

JS:

Kod

function changeAnchor()    {
    var blok_ul = document.getElementById('tab-container-1-nav');
    var elemts_anchor = blok_ul.getElementsByTagName('a');

        for(var i = 0; i < elemts_anchor.length; i++ ) {

                elemts_anchor[i].style.fontWeight='normal';
                elemts_anchor[i].style.color='black';      // kolor normalny/domyslny odnosnika, przed kliknieciem!
        }
}

html

[HTML] pobierz, plaintext 
<ul id="tab-container-1-nav">
     <li><a href="#tab1" onClick="changeAnchor(); this.style.color='yellow';this.style.fontWeight=700;">Zakładka 1</a></li>
     <li><a href="#tab2" onClick="changeAnchor(); this.style.color='yellow';this.style.fontWeight=700;">Zakładka 2</a></li>
     </ul>
[HTML] pobierz, plaintext

Licze ze pomoglo

JamalBIG

10.05.2009, 19:53:51

Oj pomoglo wrecz idealnie

tylko jeszcze mam jedna mala prosbe jak to 'zmodyfikowac' jezeli chce miec zamiast tekstu jakies obrazki?

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.