[Erledigt] [JS] DIV ein/ausblenden ID mit function übertragen

worldnapper93 · 02.01.2011, 14:32

Hey ho,
Ich möchte zwei div's ein und ausblenen, dabei soll die div ID durch den funktionsaufruf übertragen werden. Eigentlich sollte außerdem nur eines der divs angezeigt werden.

Kann mir bitte jemand helfen, ich komm grad einfach nich weiter!

Code:

<html>
<head>
<script>
function showDiv(divID)
{
   area=window.document.getElementById(divID);
   if(area.style.display=="" || area.style.display=="block")
   {
      area.style.display="none";
   }
   else
   {
      area.style.display="block";
   }
}
</script>

</head>
<body onload="javascript:showDiv(area2)">
<input type="button" onclick="showDiv(area1)" value="1 Anzeigen/Verstecken">
<input type="button" onclick="showDiv(area2)" value="2 Anzeigen/Verstecken">
<div id="area1">
<h3>Inhalt1</h3>
Der Inhalt1
</div>

<div id="area2">
<h3>Inhalt2</h3>
Der Inhalt2
</div>
</body>
</html>

Chriz · 03.01.2011, 10:23

Die on*-Attribute in HTML erwarten bereits JavaScript, lass das "javascript:" also im onload weg!

Dein Skript sieht doch sonst ganz gut aus. Musst dir eben noch eine hideAll()-Funktion bauen, die du an den Anfang von showDiv() einfügst, damit eben alle sichtbaren Elemente vorher nochmal ausgeblendet werden.

jQuery könnte dir da ungemein helfen, das ganze zu vereinfachen.

http://api.jquery.com/toggle/
http://api.jquery.com/visible-selector/ (is(':visible'))

worldnapper93 · 03.01.2011, 15:25

Ich habe JQuery.Tabs gefunden und den Code Umgeschrieben...
Aber die Webseite giebt nur

Zitat:

area 1
Inhalt1
area 2
Inhalt2
area 3
Inhalt3

aus.

jquery-1.2.6.min.js und jquery.tabs.js habe ich heruntergeladen.

PHP-Code:

  <html>

    <head>

        <script type = "text/javascript" src = "jquery-1.2.6.min.js"></script>

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

<script type = "text/javascript">

    // initialize plugin code

    $(document).ready(function() {

 
        jQuery.Tabs.initialize( "MyTabbedView",

                                "300px", "150px",

                                ['Page1', 'Page2', 'Page3'],

                                ['area1',       'area2',      'area3'] );

 
    });

</script>

 
 
    </head>

    <body>

 
<div id = "MyTabbedView"></div>

 
<div id = "area1">area 1<br/>Inhalt1</div>

<div id = "area2">area 2<br/>Inhalt2</div>

<div id = "area3">area 3<br/>Inhalt3</div>

 
 
 
   </body>

</html>

Wo liegt der Fehler??

Chriz · 03.01.2011, 18:21

Also deine Attributnotation mit " = " ist echt ugly, "=" reicht doch oder?

Ich hab die Tabs auch vor kurzem verwendet, kenne deine Anwendungstechnik jetzt nicht (kann aber gut möglich sein). Ich habe das so gemacht:

Code:

<div class="tabs">
<ul>
<li><a href="#tab-x">Tab X</li>
<li><a href="#tab-y">Tab Y</li>
</ul>
<div id="tab-x">Inhalt Tab X</div>
<div id="tab-y">Inhalt Tab Y</div>
</div>

<script ..>
$(document).ready(function() {
  $('div.tabs').tabs();
}
</script>

worldnapper93 · 03.01.2011, 18:23

Mein fertiges Ergebnis sieht so aus:

PHP-Code:

  <!DOCTYPE html>

<html>

<head>

  <style>

.body {height:80px;background-color:#fff;} 

.body div {height:32px;vertical-align:middle;text-align:center;} 

.body h3 {text-align:center;} 

.tabsView td {border:solid 1px #ff6633;border-top:none;border-right:solid 2px #ff3333;}

.tabsView th {cursor:pointer;padding:2px;font-weight:normal;font-style:italic;color:#888;border:solid 1px #bbb;border-right:none;background-color:#f8f8f8;border-bottom:solid 1px #ff3333;} 

#tabsView > .tabsView {width:465px;} 

.tabsView {width:450px;border-collapse:collapse;border:none;margin:5px;} 

.tabsView tr {border-right:solid 1px #bbb;} 

th.header_true {font-weight:bold;border:solid 1px #ff6633;border-right:solid 2px #ff3333;border-bottom:solid 1px #eee;color:#ff6633;background-color:#fff;} 

</style>

  <script src="http://code.jquery.com/jquery-latest.min.js"></script>

  <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

</head>

<body>

  

<script id="tabsTmpl" type="text/x-jquery-tmpl">

    {{wrap(null, {state: $item.state}) "#tabsWrap"}}

        <h3>1-5</h3>

        <div>

            1. <b>Seite</b>

        </div>

        <h3>6-10</h3>

        <div>

            <b>2.</b> Seite

        </div>

        <h3>11-15</h3>

        <div>

            3. <em>Seite</em> <br/> 

        </div>

        <h3>16-20</h3>

        <div>

            4. <em>Seite</em> <br/> 

        </div>

        <h3>21-25</h3>

        <div>

            5. <em>Seite</em> <br/>

        </div>

    {{/wrap}}

</script>

 
<script id="tabsWrap" type="text/x-jquery-tmpl">

    <table class="tabsView"><tbody>

        <tr>

            {{each $item.html("h3", true)}}

                <th class="header_${$index === $item.state.activeIndex}">

                    ${$value}

                </th>

            {{/each}}

        </tr>

        <tr><td colspan='${$item.html("h3").length}'>

            <div class="body">

                {{html $item.html("div")[$item.state.activeIndex]}}

            </div>

        </td></tr>

    </tbody></table>

</script>

 
<div id="tabsView"></div>

 
<script>

/* Track the selected tab index */

var state = { activeIndex: 0 };

 
/* Render tabs view */

$( "#tabsTmpl" ).tmpl( null, { state: state})

    .appendTo( "#tabsView" );

 
$( "#tabsView" )

    .delegate( ".tabsView th", "click", function() {

        var tmplItem = $.tmplItem( this );

 
        /* Set the selected tab index to this tab */

        tmplItem.state.activeIndex = $(this).index();

 
        /* update the rendering */

        tmplItem.update();

    });

</script>

 
</body>

</html>

Danke @Chriz

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Observer-Pattern	Kardey	Software-Design	20	15.03.2010 17:16
[Erledigt] Werte aus private function werden in public function nciht übernommen	litterauspirna	PHP Tipps 2010	3	03.02.2010 11:31
Login-Script in Ordnung?	Silent	PHP Tipps 2009	73	26.11.2009 01:02
JS-Kalender funktioniert nicht im IE8	ToxicToast	JavaScript, Ajax und mehr	4	18.11.2009 16:26
variable mit onclick an php	drombusch	PHP Tipps 2009	8	30.08.2009 14:45
Decorator-Pattern	grizu	PHP Tipps 2009	15	12.08.2009 14:41
Fehler beim kompilieren von php 5.2.9	malio	Server, Hosting und Workstations	11	05.06.2009 18:40
JS: Einführung - Javascript im Schichtenmodell	nikosch	Tutorials	4	11.04.2009 17:06
Variabel von function zu function übertragen	Ryckmaster	PHP Tipps 2008	2	12.12.2008 12:48
[Erledigt] Verliere Zuordung in einer JS Klasse	tomtaz	JavaScript, Ajax und mehr	2	08.12.2008 21:55
[Erledigt] Vererbung - Zugriff auf Elternmethoden nicht möglich	unimow	PHP Tipps 2008	5	03.11.2008 18:53
Fehlermeldung : Call to a member function foo() on a non-object	Mark Taylor	PHP Tipps 2008	4	14.09.2008 20:38
GD-Spezialisten gesucht....wer kann helfen?	rezix	PHP Tipps 2008	12	26.02.2008 17:55
Call to a member function on a non-object	Riks	PHP Tipps 2007	20	10.02.2007 22:59
function in einer function - help!		PHP Tipps 2005-2	4	25.10.2005 00:20


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

03.01.2011, 10:23
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	Die on*-Attribute in HTML erwarten bereits JavaScript, lass das "javascript:" also im onload weg! Dein Skript sieht doch sonst ganz gut aus. Musst dir eben noch eine hideAll()-Funktion bauen, die du an den Anfang von showDiv() einfügst, damit eben alle sichtbaren Elemente vorher nochmal ausgeblendet werden. jQuery könnte dir da ungemein helfen, das ganze zu vereinfachen. http://api.jquery.com/toggle/ http://api.jquery.com/visible-selector/ (is(':visible')) __________________ "Nuschel ich?" - "Was?"

03.01.2011, 18:21
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	Also deine Attributnotation mit " = " ist echt ugly, "=" reicht doch oder? Ich hab die Tabs auch vor kurzem verwendet, kenne deine Anwendungstechnik jetzt nicht (kann aber gut möglich sein). Ich habe das so gemacht: Code: <div class="tabs"> <ul> <li><a href="#tab-x">Tab X</li> <li><a href="#tab-y">Tab Y</li> </ul> <div id="tab-x">Inhalt Tab X</div> <div id="tab-y">Inhalt Tab Y</div> </div> <script ..> $(document).ready(function() { $('div.tabs').tabs(); } </script> __________________ "Nuschel ich?" - "Was?"

03.01.2011, 18:23
worldnapper93 Neuer Benutzer Registriert seit: 02.01.2011 Beiträge: 3 PHP-Kenntnisse: Fortgeschritten	Mein fertiges Ergebnis sieht so aus: PHP-Code: <!DOCTYPE html> <html> <head> <style> .body {height:80px;background-color:#fff;} .body div {height:32px;vertical-align:middle;text-align:center;} .body h3 {text-align:center;} .tabsView td {border:solid 1px #ff6633;border-top:none;border-right:solid 2px #ff3333;} .tabsView th {cursor:pointer;padding:2px;font-weight:normal;font-style:italic;color:#888;border:solid 1px #bbb;border-right:none;background-color:#f8f8f8;border-bottom:solid 1px #ff3333;} #tabsView > .tabsView {width:465px;} .tabsView {width:450px;border-collapse:collapse;border:none;margin:5px;} .tabsView tr {border-right:solid 1px #bbb;} th.header_true {font-weight:bold;border:solid 1px #ff6633;border-right:solid 2px #ff3333;border-bottom:solid 1px #eee;color:#ff6633;background-color:#fff;} </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> </head> <body> <script id="tabsTmpl" type="text/x-jquery-tmpl"> {{wrap(null, {state: $item.state}) "#tabsWrap"}} <h3>1-5</h3> <div> 1. <b>Seite</b> </div> <h3>6-10</h3> <div> <b>2.</b> Seite </div> <h3>11-15</h3> <div> 3. <em>Seite</em> <br/> </div> <h3>16-20</h3> <div> 4. <em>Seite</em> <br/> </div> <h3>21-25</h3> <div> 5. <em>Seite</em> <br/> </div> {{/wrap}} </script> <script id="tabsWrap" type="text/x-jquery-tmpl"> <table class="tabsView"><tbody> <tr> {{each $item.html("h3", true)}} <th class="header_${$index === $item.state.activeIndex}"> ${$value} </th> {{/each}} </tr> <tr><td colspan='${$item.html("h3").length}'> <div class="body"> {{html $item.html("div")[$item.state.activeIndex]}} </div> </td></tr> </tbody></table> </script> <div id="tabsView"></div> <script> /* Track the selected tab index / var state = { activeIndex: 0 }; / Render tabs view / $( "#tabsTmpl" ).tmpl( null, { state: state}) .appendTo( "#tabsView" ); $( "#tabsView" ) .delegate( ".tabsView th", "click", function() { var tmplItem = $.tmplItem( this ); / Set the selected tab index to this tab / tmplItem.state.activeIndex = $(this).index(); / update the rendering */ tmplItem.update(); }); </script> </body> </html> Danke @Chriz