News - Features - Downloads - Forum - Team - Support - Switch View: Screen
Login - Registrierung - Passwort vergessen

Antworten: 21
Seite [1] 2 >
RAINING-BLOOD


Rock the board





Beiträge: 70
 # Thema - 19.06.2011 um 19:02 Uhr
Hallo,

Ich bin schon den halben Tag am tüfteln, wie ich eine Navigation mit wechselndem Inhalt erstellen kann. In etwa wie hier im linken Bereich der HP zu sehen http://www.myfascination.de/.
Angelangt bin ich nun bei der Slimbox v2, weil diese auch von einigen Clans benutzt wird. Die css Dateien und Javasript Dateien habe ich bereits auf den FTP geladen und in der index.htm die Verweise im Header eingebunden. Nun weiß ich nicht, wie ich das ganze in html und in der template.css einfügen soll. Die Slimbox ist ja eigentlich für Images gedacht, weshalb ich noch einiges anpassen müsste.

Vielleicht kann mir ja jemand weiterhelfen



------------------
Grüße, RAINING-BLOOD
Inaktiv
gamermazzo


Going for pro




Beiträge: 450
 # Antwort: 1 - 19.06.2011 um 19:54 Uhr
dann musst du uns schon sagen wie weit du bist und am besten deinen code hier reinstellen.


------------------
Gruß

Mazzo

Inaktiv
|
RAINING-BLOOD
Thread-Ersteller


Rock the board





Beiträge: 70
 # Antwort: 2 - 19.06.2011 um 20:26 Uhr
Also folgendes habe ich im header der index.htm eingefügt:

<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slimbox2.js"></script>

Die entsprechenden Dateien habe ich wie erähnt schon auf FTP geuploaded.

Sonst habe ich noch nichts gemacht, weil ich nicht wusste was ich einfügen muss.
Ich weiß auch nichts mit dem Inhalt der slimbox2.css anzufangen.

Wie man Images in der index einfügt, ist überall schön erklärt, mit
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>


Mir würde vielleicht schon ein kleiner Denkanstoss reichen


EDIT: Ich brauche auch nicht unbedingt die Slimbox, wenn jemand einen anderen Weg kennt, dann wäre mir das auch recht.



------------------
Grüße, RAINING-BLOOD

Zuletzt editiert von RAINING-BLOOD am 20.06.2011 um 13:55 Uhr (2x Editiert)
Inaktiv
|
Tress13


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
 # Antwort: 3 - 23.06.2011 um 14:00 Uhr
Javascript wird aktuell nicht mehr im Head eingebunden.
Das schreibste in den Body. Und zwar als letzte Zeile.

Etwa so:

 
1.
2.
3.
4.
1. / 2. / ... 
 
    <script language="javascript" type="text/javascript" src="navigation.js"></script>
</body>

Nur halt mit deiner scr.

Aber mich interessiert dieses Thema auch.
Ich möchte auch eine wechselbare Navlisten-Box erstellen.
Finde nur kein Script dazu.


------------------


www.iv-gaming.de | www.iv-artwork.de

Inaktiv
|
floH


Rock the board




Herkunft: Reichenberg
Beiträge: 82
 # Antwort: 4 - 23.06.2011 um 14:38 Uhr
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-slick-tabb ed-content-area/

http://www.gayadesign.com/diy/animated-tabbed-content-with-jquery/

http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/

http://trevordavis.net/blog/jquery-tabbed-navigation

http://www.cssnewbie.com/advanced-jquery-tabbed-box-techniques/

http://www.queness.com/post/106/jquery-tabbed-interfacetabbed-structure-menu-tut orial

Um es auf den Punkt zu bringen: http://www.extratuts.com/amazing-jquery-tabs-tutorials

(Zeit in Google <1 min)

Wenn man die Animation raus nimmt hat man genau das was man sucht. jQuery ist bereits in CSP enthalten und kann genutzt werden. Aber es gibt ja auch Beispiele die ohne Animation sind.

Bei Fragen helf ich gerne weiter


Zuletzt editiert von floH am 23.06.2011 um 14:44 Uhr (3x Editiert)
Inaktiv
|
Tress13


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
 # Antwort: 5 - 23.06.2011 um 15:27 Uhr
Erstmal vielen Dank. Weiss nicht, warum ich nichts gefunden habe.

Habe das mal so eingebunden:

index.htm:
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
1. / 2. / ... 
 
<ul class="tabs">
    <li><a href="#tab1">Next wars</a></li>
    <li><a href="#tab2">Last Wars</a></li>
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
      {wars:navnext}
    </div>
    <div id="tab2" class="tab_content">
      {wars:navlist2}
    </div>
</div>


 
1.
2.
3.
4.
1. / 2. / ... 
 
   <script language="javascript" type="text/javascript" src="tabnavi.js"></script>
</body>



layout.css:
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
1. / 2. / ... 
 
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px; /*--Set height of tabs--*/
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    width: 100%;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 31px; /*--Subtract 1px from the height of the unordered list--*/
    line-height: 31px; /*--Vertically aligns the text within the tab--*/
    border: 1px solid #999;
    border-left: none;
    margin-bottom: -1px; /*--Pull the list item down 1px--*/
    overflow: hidden;
    position: relative;
    background: #e0e0e0;
}
ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
    outline: none;
}
ul.tabs li a:hover {
    background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
    background: #fff;
    border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}

.tab_container {
    border: 1px solid #999;
    border-top: none;
    overflow: hidden;
    clear: both;
    float: left; width: 100%;
    background: #fff;
}
.tab_content {
    padding: 20px;
    font-size: 1.2em;
}


tabnavi.js (Liegt im Templates-Ordner):
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
1. / 2. / ... 
 
$(document).ready(function() {

    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });

});



Allerdings funktioniert das leider nicht so ganz.
Könnte da etwas Hilfe gebrauchen.


------------------


www.iv-gaming.de | www.iv-artwork.de

Zuletzt editiert von Tress13 am 23.06.2011 um 22:28 Uhr (1x Editiert)
Inaktiv
|
floH


Rock the board




Herkunft: Reichenberg
Beiträge: 82
 # Antwort: 6 - 23.06.2011 um 18:11 Uhr
Kann mir mal bitte einer sagen wer auf den Mist kam eine externe Java Script Datei im Body einzubinden? Oo
Ich hab da jetzt gegoogelt und gegoogelt aber nichts dazu gefunden. Helft mir da mal auf die Sprünge

Und du hast alles richtig gemacht... sollte auch funktionieren.
Wenn du in deinem Template jQuery fest einbidest dann pass auf das es nicht zwei mal eingebunden wird.
Entferne eines wieder.

Ich für meinen Teil hab den ganzen mist der im Body eingebunden wird rausgeschmissen weil ich keinen Sinn dahinter seh?! (Hoffe das ich da noch einem besseren belehrt werde).
Ich habs in der \csp\system\core\templates.php entfernt (Zeile 429 glaub war das wo jQuery eingebunden wird)

Probiers dann noch mal


Zuletzt editiert von floH am 23.06.2011 um 18:11 Uhr (1x Editiert)
Inaktiv
|
Jam2 ClanSphere Team


Highlander





Beiträge: 3291
 # Antwort: 7 - 23.06.2011 um 18:21 Uhr
Weil es am Ende am meisten Sinn macht?
Informier dich darüber was wann der Browser interpretiert und vor allem was gleichzeitig und was Warten muss


------------------
Gruß/ Best regards
Jam2

Nützliche Forumbeiträge/Codepastes: (Useful comments in our board / codepastes)
Template Switch for index.php
Board Navlist last posts

Edi: könnte man denn auch hier eine erweiterung einfügen?
Jam2: das web ist wie toyota.....
Edi: hö ?
Jam2: nichts ist unmöglich!


Zuletzt editiert von Jam2 ClanSphere Team am 23.06.2011 um 18:21 Uhr (1x Editiert)
Inaktiv
|
Tress13


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
 # Antwort: 8 - 23.06.2011 um 18:27 Uhr
Wie meinst du "entferne eines wieder" ?
Meinst du ich soll den Link aus dem unteren body-Teil entfernen,
sodass die Javascript-Datei nicht mehr aufgerufen wird ?

Habe ich mal gemacht, aber ohne Erfolg.


------------------


www.iv-gaming.de | www.iv-artwork.de

Inaktiv
|
floH


Rock the board




Herkunft: Reichenberg
Beiträge: 82
 # Antwort: 9 - 23.06.2011 um 18:45 Uhr
Funktioniert es bei dir Lokal?

Erstell mal eine extra Datei nur um fix das Ding zu testen... dann schauen wir mal weiter.


Inaktiv
|
Tress13


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
 # Antwort: 10 - 23.06.2011 um 18:49 Uhr
Wie genau meinst du das ?


------------------


www.iv-gaming.de | www.iv-artwork.de

Inaktiv
|
floH


Rock the board




Herkunft: Reichenberg
Beiträge: 82
 # Antwort: 11 - 23.06.2011 um 18:56 Uhr
Erstell eine *.html Datei auf deinem Desktop. Pack da den Code rein von den Tab usw...

Also das Tut was du dir ausgesucht hast nach machen ohne Clansphere im Rücken.

Btw: Jam2 nu rück raus mit der Sprache?! Ich sehe da absolut keinen Grund dafür das am Ende des Body bereiches der beste Punkt zur Einbindung dieser Dateien ist?! Klär mich mal bitte auf... steh da echt vor einem großen Rätsel für mich :(


Inaktiv
|
Jam2 ClanSphere Team


Highlander





Beiträge: 3291
 # Antwort: 12 - 23.06.2011 um 19:06 Uhr
http://phpperformance.de/javascript-und-css-dateien-parallel-downloaden/

Das Bild verdeutlicht das was ich oben meinte


------------------
Gruß/ Best regards
Jam2

Nützliche Forumbeiträge/Codepastes: (Useful comments in our board / codepastes)
Template Switch for index.php
Board Navlist last posts

Edi: könnte man denn auch hier eine erweiterung einfügen?
Jam2: das web ist wie toyota.....
Edi: hö ?
Jam2: nichts ist unmöglich!


Inaktiv
|
floH


Rock the board




Herkunft: Reichenberg
Beiträge: 82
 # Antwort: 13 - 23.06.2011 um 19:27 Uhr
Ja und genau das ist geballtes Halbwissen auf den Punkt gebracht.

Es gibt nämlich nun Scripte die an der Stelle eingebunden Fehler erzeugen oder nicht funktionieren. Gerade bei jQuery sind einige Funktionen die dann keine funktionalität mehr vorweisen.

Man hat das nur als "Lösung" angesehen um Ladezeiten zu optimieren was aber Contraproduktiv ist. Denn klar ist das Zeiten reduziert werden doch für welchen Preis? Das wird nicht weiter hinterfragt.

jQuery definitiv im head einbinden damit die volle Funktionalität verfügbar ist.

Und Ladezeiten die man optimiert von 200-300 milisekunden sind nonsens wenn man dafür auf Funktionen verzichten muss.


Was nun auch dem Fehler hier näher kommt. Nehm bitte mal jQuery von da unten raus und binde es oben im Head richtig ein. Dann sollte dein Script auch funktionieren. Denn du nutzt unter anderem eine solche Funktion.


Inaktiv
|
Tress13


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
 # Antwort: 14 - 23.06.2011 um 19:27 Uhr
Du meinst dann so ?

test.html
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
1. / 2. / ... 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  

<head>
    <meta http-equiv="Content-Type" content="text/html; charset={func:charset}" />
    <style type="text/css">
<!--
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px; /*--Set height of tabs--*/
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    width: 100%;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 31px; /*--Subtract 1px from the height of the unordered list--*/
    line-height: 31px; /*--Vertically aligns the text within the tab--*/
    border: 1px solid #999;
    border-left: none;
    margin-bottom: -1px; /*--Pull the list item down 1px--*/
    overflow: hidden;
    position: relative;
    background: #e0e0e0;
}
ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
    outline: none;
}
ul.tabs li a:hover {
    background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
    background: #fff;
    border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}

.tab_container {
    border: 1px solid #999;
    border-top: none;
    overflow: hidden;
    clear: both;
    float: left; width: 100%;
    background: #fff;
}
.tab_content {
    padding: 20px;
    font-size: 1.2em;
}
-->
</style>
    <script language="JavaScript">
    $(document).ready(function() {

    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });

    });
    </script>
</head>


<body>

<ul class="tabs">
    <li><a href="#tab1">Next Wars</a></li>
    <li><a href="#tab2">Last Wars</a></li>
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">{wars:navnext}</div>
    <div id="tab2" class="tab_content">{wars:navlist2}</div>
</div>

</body>
</html>


------------------


www.iv-gaming.de | www.iv-artwork.de

Inaktiv
|
Jam2 ClanSphere Team


Highlander





Beiträge: 3291
 # Antwort: 15 - 23.06.2011 um 19:34 Uhr
ich denke, dass er die komplette jquery lib meint...


@floh entweder hab ich diese funktionen seit monaten/jahren nicht gebraucht oder ich habs nie gemerkt. hast du für mich einen link welche funktionen nicht funktionieren sollten?


------------------
Gruß/ Best regards
Jam2

Nützliche Forumbeiträge/Codepastes: (Useful comments in our board / codepastes)
Template Switch for index.php
Board Navlist last posts

Edi: könnte man denn auch hier eine erweiterung einfügen?
Jam2: das web ist wie toyota.....
Edi: hö ?
Jam2: nichts ist unmöglich!


Inaktiv
|
floH


Rock the board




Herkunft: Reichenberg
Beiträge: 82
 # Antwort: 16 - 23.06.2011 um 19:34 Uhr
Ja genau nur musst du jetzt noch jQuery selber einbinden da dieses Tutorial darauf aufbaut.

<script type=”text/javascript” src=”jquery.js”></script>

und das bitte im <head> Bereich nach den *.css Dateien


Inaktiv
|
Tress13


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
 # Antwort: 17 - 23.06.2011 um 19:37 Uhr
Also dann so:

test.html
mehr... +-
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
1. / 2. / ... 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  

<head>
    <meta http-equiv="Content-Type" content="text/html; charset={func:charset}" />
    <style type="text/css">
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px; /*--Set height of tabs--*/
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    width: 100%;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 31px; /*--Subtract 1px from the height of the unordered list--*/
    line-height: 31px; /*--Vertically aligns the text within the tab--*/
    border: 1px solid #999;
    border-left: none;
    margin-bottom: -1px; /*--Pull the list item down 1px--*/
    overflow: hidden;
    position: relative;
    background: #e0e0e0;
}
ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
    outline: none;
}
ul.tabs li a:hover {
    background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
    background: #fff;
    border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}

.tab_container {
    border: 1px solid #999;
    border-top: none;
    overflow: hidden;
    clear: both;
    float: left; width: 100%;
    background: #fff;
}
.tab_content {
    padding: 20px;
    font-size: 1.2em;
}
</style>
    <script type="text/javascript" src="jquery.js"></script>
    <script language="JavaScript">
    $(document).ready(function() {

    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });

    });
    </script>
</head>


<body>

<ul class="tabs">
    <li><a href="#tab1">Next Wars</a></li>
    <li><a href="#tab2">Last Wars</a></li>
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">{wars:navnext}</div>
    <div id="tab2" class="tab_content">{wars:navlist2}</div>
</div>

</body>
</html>


Läuft aber auch nicht.


------------------


www.iv-gaming.de | www.iv-artwork.de

Inaktiv
|
floH


Rock the board




Herkunft: Reichenberg
Beiträge: 82
 # Antwort: 18 - 23.06.2011 um 19:59 Uhr
Also damit gehts dann:

Test.html +-
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
1. / 2. / ... 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<!-- CSS -->
<style type="text/css">
body {
    background: #f0f0f0;
    margin: 0;
    padding: 0;
    font: 10px normal Verdana, Arial, Helvetica, sans-serif;
    color: #444;
}
h1 {font-size: 3em; margin: 20px 0;}
.container {width: 500px; margin: 10px auto;}
ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px;
    border-bottom: 1px solid #999;
    border-left: 1px solid #999;
    width: 100%;
}
ul.tabs li {
    float: left;
    margin: 0;
    padding: 0;
    height: 31px;
    line-height: 31px;
    border: 1px solid #999;
    border-left: none;
    margin-bottom: -1px;
    background: #e0e0e0;
    overflow: hidden;
    position: relative;
}
ul.tabs li a {
    text-decoration: none;
    color: #000;
    display: block;
    font-size: 1.2em;
    padding: 0 20px;
    border: 1px solid #fff;
    outline: none;
}
ul.tabs li a:hover {
    background: #ccc;
}    
html ul.tabs li.active, html ul.tabs li.active a:hover  {
    background: #fff;
    border-bottom: 1px solid #fff;
}
.tab_container {
    border: 1px solid #999;
    border-top: none;
    clear: both;
    float: left; 
    width: 100%;
    background: #fff;
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}
.tab_content {
    padding: 20px;
    font-size: 1.2em;
}
.tab_content h2 {
    font-weight: normal;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ddd;
    font-size: 1.8em;
}
.tab_content h3 a{
    color: #254588;
}
.tab_content img {
    float: left;
    margin: 0 20px 20px 0;
    border: 1px solid #ddd;
    padding: 5px;
}
</style>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- Das Script in einer externen Datei -->
<script src="tabs.js" type="text/javascript"></script>

</head>
<body>
<div class="container">


    <ul class="tabs">
        <li><a href="#tab1">Upcomming</a></li>
        <li><a href="#tab2">Last Wars</a></li>
    </ul>
    <div class="tab_container">
        <div id="tab1" class="tab_content">
            <h2>Upcomming</h2>
            <p>This week against me!</p>
        </div>
        <div id="tab2" class="tab_content">
            <h2>Last Wars</h2>
            <p>You've lost!</p>
        </div>
    </div>
</div>
</body>
</html>


tabs.js +-
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
1. / 2. / ... 
 $(document).ready(function() {

    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.tabs li").click(function() {

        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });

});



Ich such dir mal den Link raus Jam. Find ihn nur gerade nicht :(

Es geht aber auch darum das bezüge fehlen können. Ich hoff das ich den Link zwischen den 5000 anderen hier mal finde

Edit:

Hier hast du die Aktuelle Version zum einbinden:
 
1.
1. / 2. / ... 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>


Zuletzt editiert von floH am 23.06.2011 um 20:03 Uhr (2x Editiert)
Inaktiv
|
Tress13


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
 # Antwort: 19 - 23.06.2011 um 21:34 Uhr
Nur mit dem hier geht es:

 
1.
2.
3.
1. / 2. / ... 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>


------------------


www.iv-gaming.de | www.iv-artwork.de

Inaktiv
|
sgraewe ClanSphere Team

Supporter
Supporter




Beiträge: 6116
 # Antwort: 20 - 24.06.2011 um 07:33 Uhr
@Floh: genau aus dem Grund weil halt einige scripte im head geladen werden müssen damit sie funktionieren, gibt es ja {func:javascript}, um so halt auch die Möglichkeit der freien Platzierung zu bieten


Inaktiv
|
Antworten: 21
Seite [1] 2 >


Sie müssen sich registrieren, um zu antworten.

ClanSphere Project - Mailus - Imprint - Disclaimer - Scriptinfo