Suche kleine bestimmte Navigation ?

[Japs]

Hallo,

ich suche eine ganz bestimmte Navigationsmöglichkeit und zwar möchte ich innerhalb einer aufgerufenen Webseite verschiedenen Inhalte anzeigen lassen - und das ohne, dass die aufgerufene Seite neu geladen werden muß.

Am Besten wäre mir eine CSS Umsetzung :)
Wist Ihr, wo cih wa spassendes finden könnte ?

Danke & Gruß Dirk

[SloMo]

Ich denke dabei spontan an JavaScript und style="display:none" ...mit JQuery wäre es eine Sache von wenigen Minuten, wenn man sich damit einigermaßen vertraut ist.

[Japs]

Ich denke dabei spontan an JavaScript und style="display:none" ...mit JQuery wäre es eine Sache von wenigen Minuten, wenn man sich damit einigermaßen vertraut ist.

Mmm - nur leider bin ich damit gar nicht vertraut und brächte deshalb ein fertiges Beispiel - welches ich für meine zwecke anpassen könnte.

Ich braäuchte es auch nur für 2 Links :
A > B
A < B

Gruß Dirk

[SloMo]

Das könnte helfen: https://jqueryfordesigners.com/jquery-tabs/

[Japs]

Das könnte helfen: https://jqueryfordesigners.com/jquery-tabs/

Danke - genau das, was cih gesucht habe :)
Gruß Dirk

[Japs]

Hi,

also die Empfehlung war schon recht gut, allerdings will das Script bei mir noch nicht so, wie ich es will:

Diesen Teil des Scripts habe ich in eine "navi.js" ausgelagert und über
"<script type="text/javascript" src="https://domain.com/js/navi.js"></script> in meinen Header eingebunden - wobei ich das fett markierte weg gelassen habe:

<script src="/js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$ (function () {
var tabContainers = $('div.tabs > div');
tabContainers.hide().filter(':first').show();

$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
</script>

Mein CSS dazu sieht so aus, weches bereits schon angepssst wurde:

div#content {
background:#fff;
height: 100%;
min-height: 650px;
padding:35px 25px ;
border-right: 1px solid #cdcdcd;
border-left: 1px solid #cdcdcd;
border-bottom-style: none;
border-bottom-width: 0;
}


div#content UL.tabNavigation {
list-style: none;
margin: 0;
padding: 0;
}

div#content UL.tabNavigation LI {
display: inline;
}

div#content UL.tabNavigation LI A {
padding: 3px 5px;
background-color: #e5e5e5;
color: #405c89;
text-decoration: none;
}

div#content UL.tabNavigation LI A.selected,
div#content UL.tabNavigation LI A:hover {
background-color: #405c89;
color: #fafafa;
padding-top: 5px;
}

div#content UL.tabNavigation LI A:focus {
outline: 0;
}

div#content div.tabs > div {
margin-top: 3px;
margin-bottom: 10px;
padding-top: 3px;
border-top: 1px solid #e5e5e5;
}

div#content #first {}

div#content #second {}

div#content .waste {
min-height: 100%;
}

Aber es funktioniert nicht ???
Ich bekomme nicht wie in diesem Beispiel: https://jqueryfordesigners.com/demo/tabs.html umschaltbar, sondern First & Second einfach untereinander angezeigt - kann also nicht von einem zum anderen quasi umschalten ?

Jemand eine Idee warum nicht ?
Danke & Gruß Dirk

[tryout]

Naja, Du musst JQuery natürlich auch einbinden...
Die Zeile

Code: Alles auswählen

<script src="/js/jquery.js" type="text/javascript" charset="utf-8"></script> 

kannst Du nicht einfach streichen.
Die musst Du so wie Deine navi.js einbinden...

[Japs]

Danke funktioniert :)
Ich hätte mal nachdenken sollen :(

Gruß Dirk

Naja, Du musst JQuery natürlich auch einbinden... :lol:
Die Zeile

Code: Alles auswählen

<script src="/js/jquery.js" type="text/javascript" charset="utf-8"></script> 

kannst Du nicht einfach streichen.
Die musst Du so wie Deine navi.js einbinden... :wink:

[nerd]

wieso jquery wenns auch komplett ohne javascript geht?!

https://www.cssplay.co.uk/menus/

[Loptr]

Code: Alles auswählen

<script type="text/javascript">
function anzeigen&#40;welches&#41; &#123;
	if &#40;welches == '2'&#41; &#123;
		document.getElementById&#40;2&#41;.style.display='block';
		document.getElementById&#40;1&#41;.style.display='none';
	&#125;
	else if &#40;welches == '1'&#41; &#123;
		document.getElementById&#40;1&#41;.style.display='block';
		document.getElementById&#40;2&#41;.style.display='none';
	&#125;
&#125;
</script>

Code: Alles auswählen

<a onclick="javascript&#58;anzeigen&#40;1&#41;;">Ansicht 1</a>
<a onclick="javascript&#58;anzeigen&#40;2&#41;;">Ansicht 2</a>

Code: Alles auswählen

<div id="1" class="main">
<div id="2" style="display&#58;none">

Wenn du das javascript noch ein wenig anpasst (dass alle Elemente, welche nicht geklickt sind nen display:none bekommen) hast genau das.

Da man mit Display none arbeitet werden jetzt wahrscheinlich einige SEOs darauf kommen, dass es gefährlich ist... daher gleich vorweg: SEO ungetestet

Wenn du ein Beispiel benötigst: funktioniert auf www.eecity.de mit der Grafik- uns Konsoleansicht (oben).