✔ Jquery Tabs ohne Javascript bester Ansatz

[kosovafan]

Hallo,

ich möchte meine Websitedesign ein wenig auffrischen. Bisher nutze ich nie Javascript, den aussperren ist nicht meine
Philosophie. Aber Programmierung ist im weiter sinne immer eine If Else. Jetzt stelle ich mir nur die Frage, wie ich am
besten eine Alternative zu Javascript aktiviert/deaktiviert schaffen soll. PHP scheint nicht möglich, die ganzen on/off
Anweisungen verstehe ich mehr zu einen css Selektor, nicht für einen ganzen Block. Was wäre eure Meinung?

Ich nutze das Jquery UI Tab Widget, fand ich ansprechend auch wegen den Tablets die immer modernen werden.
Das Problem, mit den Beispiel auf der UI Site funktioniert das auch ohne Probleme, wird aber unleserlich wenn
Javascript deaktiviert ist.

<div id="content">
	<div class="box">
		<h1>Bloggen</h1>
		<p>PHP Anweisung aus Datenbank</p>
	</div>
	
	<div class="box">
		<h1>Howto</h1>
		<p><a href="howto/howto.html">Howto Nummer eins</a></p>
		<p><a href="howto/howto.html">Howto Nummer zwei</a></p>		
	</div>	
	
	<div class="box">
		<h1>Netzwerke</h1>
		<p class="yt">Youtube Channel</p>
	</div>		
</div>

Jquery Tab Code

<div id="content">
	<ul>
	  <li><a href="#bloggen">Bloggen</a></li>
	  <li><a href="#howto">Howto</a></li>
	  <li><a href="#netzwerke">Netzwerke</a></li>
	</ul>
	<div class="box">
		<p>PHP Anweisung aus Datenbank</p>
	</div>
	
	<div class="box">
		<p><a href="howto/howto.html">Howto Nummer eins</a></p>
		<p><a href="howto/howto.html">Howto Nummer zwei</a></p>		
	</div>	
	
	<div class="box">
		<p class="yt">Youtube Channel</p>
	</div>		
</div>

Das Problem ist, bei deaktivierten Javascript Code wird es unleserlich. Die Frage ist wie wäre der beste
Weg die Website ohne Javascript leserlich zu halten. Meine Idee war eine PHP Abfrage mit IF und Else,
damit bin ich bisher immer gut gefahren, aber nach Recherchen im Internet geht das nicht. Was empfehlt
ihr?


Vielen Dank und Schönen Gruß
Silvio

 

[timestamp]

Auch wenn es dein Problem jetzt nicht direkt löst:
Ich finde es ist langsam Zeit sich daran zu gewöhnen, dass die breite Mehrheit Javascript benutzt. Von "aussperren" kann da nicht mehr ganz die Rede sein. Warum also sich das Leben unnötig schwer machen und auf etwas Verzichten, was einem die Arbeit abnimmt?

 

[kosovafan]

Hallo,

Sie haben recht. Ich bin aber der Meinung das Zwang den Fortschritt bremst und die Gemeinschaft schwächt.

Sie kennen alle den "Gefällt mir" Button oder die diskutieren Sie mit über unseren Facebook Account. Sie schliessen damit Nutzer aus die keinen Facebook Account haben. Soll man jetzt nicht mehr am Leben teilnehmen, oder soll ich gegen meiner Überzeugung jetzt ein Facebook Account eröffnen? Ich möchte mich daran nicht gewöhnen wollen.

Ich persönlich nutze NoScript, habe also oft die gleichen Probleme.


MFG
Silvio

 

[kosovafan]

Hallo,

ich habe eine Lösung gefunden. Ich nutze addClass und removeClass. So kann man die Überschriften einblenden was die Sache in aktueller Fassung belässt.

Vielen Dank. MFG
Silvio

 

[SonMiko]

Hi - also eine gute Möglichkeit für dein Tabproblem könnte so aussehen dass du eine Anzahl Tabs hast, und eine selbe Anzahl Inhaltscontainer die dann eingeblendet werden wenn einer der Tabs angeklickt wird. Das ganze geschieht durch Übergabe der Nummer des jeweiligen Tabs.
Beispielsweise sähe so der HTML Code aus:

<div class="tabs">
<ul>
<li>
Tab 1
</li>
<li>
Tab 2
</li>
<li>
Tab 3
</li>
</ul>
</div>
<div class="content">
<div>Inhalt 1</div>
<div>Inhalt 2</div>
<div>Inhalt 3</div>
</div>

Und so der JQuery Code:

$(document).ready(function(){
$(".tabs ul li").click(function(){
	$(".content div").eq($(this).index()).show().siblings('div').hide();
});
});

Ich würde dann noch den ersten Tabinhalt standardmäßig einblenden beim erstaufruf - das kannst du mit CSS lösen oder auch mit JS. Um es noch etwas schöner aussehen zu lassen würde ich auch noch einen weiteren Status "active" vergeben den du stylen kannst...

P.S.: Klar spricht nichts gegen Vanilla-JS, aber solange man nicht für jeden Stuss ein JS-Framework einbindet oder nach einer Extension sucht, denke ich ist es völlig okay
es sich einfach zu machen. Bei JS alleine brauche ich einige Zeilen mehr um denselben Effekt zu erzielen. Zudem ist JQuery ein sehr verbreitetes Framework - in unserer Werbeagentur wird es nahezu in jedem Projekt eingesetzt...

LG

 

[ogerly]

in deinen <body> tag übergibst du mit einem onload event die xxx() function

das sollte dann so aussehen
<body onload="xxx()">


die function:
/*
Function: xxx

Zentrale xxx Function für das ganze Projekt. klemmt bei eingeschaltet JS die <div id="nullJS"> noscript ab meldet am system ein interval zum nachladen der liste an.
*/
function xxx(){
document.getElementById('nojs').style.display = "none";
}


und das ist in deinem html code irgendwo in der seite:

<div id="nojs">
Project ist ohne JavaScript nicht nutzbar. Bitte schalten Sie es ein.
</div>

dieses div wird weggeklemmt wenn der besucher deiner seite kein javascript angeschaltet hat ...

noch fragen?

und noch was zur sache javascript .. jede vernümftige seite im netzt benutzt javascript ...das ist alles eine unsinnige panikmache ... man muss sich nur mal damit beschäftigen

 

[ogerly]

in deinen <body> tag übergibst du mit einem onload event die xxx() function

das sollte dann so aussehen
<body onload="xxx()">


die function:
/*
Function: xxx

Zentrale xxx Function für das ganze Projekt. klemmt bei eingeschaltet JS die <div id="nullJS"> noscript ab meldet am system ein interval zum nachladen der liste an.
*/
function xxx(){
document.getElementById('nojs').style.display = "none";
}


und das ist in deinem html code irgendwo in der seite:

<div id="nojs">
Project ist ohne JavaScript nicht nutzbar. Bitte schalten Sie es ein.
</div>

dieses div wird weggeklemmt wenn der besucher deiner seite kein javascript angeschaltet hat ...

noch fragen?

und noch was zur sache javascript .. jede vernümftige seite im netzt benutzt javascript ...das ist alles eine unsinnige panikmache ... man muss sich nur mal damit beschäftigen

 

[kosovafan]

Hallo,

ich habe es so gemacht das Jquery sich selbst aktiviert, im einfachsten Beispiel. Für Mobile Endgeräte wird Javascript komplett deaktiviert, weil es grafisch nicht aussah. Im Enddeffekt ist die Website auch ohne Javascript nutzbar.

Es mag sein, dass es nur Panik Macher sind. Ich kenne viele die Javascript standard deaktiviert haben und es nur aufschalten wenn es gebraucht wird und gewollt wird. Es gab vor ein paar Monaten sogar eine Attacke auf einer großen Newssite, wo mithilfe von Javascript auf einen Trojaner weitergeleitet wurde. Also Panikmache hin oder her, Javascript hat ohne jede Frage seine Berechtigung und selbst ich freunde mich damit an, es bietet aber immer noch viele Möglichkeiten des Bösen und deswegen möchte ich niemanden aussperren.


Vielen Dank, Gruß und guten Rutsch.

Silvio