loadContent - content switch -

Subshame

Grünschnabel
huhu,

habe mich seit heute Nacht hier versucht schlau zu lesen...leider nichts Passendes bzw. Helfendes gefunden...

nun bin ich hier und hier kommt schon meine Frage:

Ich möchte einen Kontent wechsel haben. Der von der Navi aus gesteuert wird.

hier der Code

HTML:
<!DOCTYPE html>
<html lang="de">
    <head>
        <title>C&N Floer | ::..*.-Home</title>
        <link rel="stylesheet" href="css/style.css" type="text/css"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="scripts/changeContent.js"></script>
    </head>
    <body>
        <section id="menubar">
            <ul>
                <li><a class="menubutton" href="#menu"><img src="images/menu.png" /></a></li>
            </ul>
        </section>
        <header>
            <ul>
                <li>
                    <a><h1>C&T | Computer & Technik</h1></a>
                    <div id="box1" class="box">F</div>
                    <div id="box2" class="box">L</div>
                    <div id="box3" class="box">O</div>
                    <div id="box4" class="box">E</div>
                    <div id="box5" class="box">R</div>
                </li>
            </ul>
        </header>
        <script type="text/javascript">
                        $(document).ready(function(){
                           $("#about").load("about.html");
                           $("#kontent1").click(function(){$("#service").load("service.html");});
                           $("#kontent2").click(function(){$("#kontakt").load("kontakt.html");});
                           $("#kontent3").click(function(){$("#imprint").load("imprint.html");});
                           $("#kontent4").click(function());}
        </script>
        <nav class="nav">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="#" id="about">Über C&T</a></li>
                <li><a href="#" id="service">Leistungen</a></li>
                <li><a href="#" id="kontakt"Kontakt</a></li>
                <li><a href="#" id="imprint">Impressum</a></li>
            </ul>
        </nav>
        <section id="main">
            <article>
                <h2>Schön das Sie da sind!</h2>
                <img src="images/artikel.jpg">
                <p id="kontent1">test1</p>
                <p id="kontent2">test2</p>
                <p id="kontent3">test3</p>
                <p id="kontent4">test4</p>
            </article>
            <aside>
                <section>
                    <h2>Weitere Artikel</h2>
                    <ul>
                        <li><a>Spannend oder?</a></li>
                        <li><a>Lese das auch!</a></li>
                        <li><a>Und diesen Artikel</a></li>
                    </ul>
                </section>
                <section>
                    <h2>Ein Textfeld</h2>
                        <ul>
                            <li>Das ist Lustig</li>
                            <li>Das finde ich auch gut</li>
                            <li>Ich schaffe das</li>
                            <li>Meine eigene Homepage</li>
                            <li>Ich möchte HTML Lernen</li>
                        </ul>
                </section>
                <section>
                    <h2>Kategorien</h2>
                        <ul>
                            <li>TEST1</li>
                            <li>TEST2</li>
                            <li>TEST3</li>
                            <li>TEST4</li>
                            <li>TEST5</li>
                        </ul>
                </section>
            </aside>
        </section>
        <footer>
            <ul>
                <li><a>&copy; 2016 Dennis Floer</a></li>
                <li><a>Kontakt</a></li>
                <li><a>Datenschutz</a></li>
                <li><a>Impressum</a></li>
            </ul>
        </footer>
    </body>
</html>


Bin für alle Ratschläge offen. Wegen meiner auch mit .PHP wenn es einer kann :(

Gruß
 
Hier meine Aktuelle CSS

CSS:
/* General Style */
body {
    background-color: #DCDCDC;
    font-size: 100%;
    margin: 0em;
    padding: 0em;
   
}

h1 {
    font-size: 2.5em;
    line-height: 3.8em;
    font-family: helvetica;
    font-weight: 100;
    color: #E2DBDB;
    margin: 0em;
}

h2 {
    font-size: 1.563em;
    line-height: 1.8em;
    font-family: helvetica;
    font-weight: 100;
    color: #2F2D2C;
    margin: 0em;
    padding: 1.25em;
    text-align: left;
}

p {
    line-height: 1.25em;
    font-family: helvetica;
    font-weight: 100;
    color: #2F2D2C;
    margin: 0em;
    padding: 1.25em;
    text-align: justify;
}

ul{
    margin: 0px;
    padding: 0px;
}

li {
    list-style: square;
    font-family: helvetica;
    font-weight: 100;
    color: #2F2D2C;
    line-height: 1.25em;
    margin: 0em;
    padding: 0em;
    margin: 0.313em 0em 0.313em 0em;
}

img {
    width: 90%;
    height: auto;
    max-width: 100%;
}

a {
    text-decoration: none;
}

/* On Top Bar */
#menubar {
    display: block;
    background: #FFFFFF;
}

#menubar ul {
    display: block;
    width: 2em;
    padding: 0.9em;
}

#menubar ul li {
    display: inline;
}

#menubar ul li a.menubutton {
    display: none;
}

/* Header */
header {
    display: block;
    background: #2F2C2C;
    text-align: center;
}

/* Boxen im Header */

.box {
    display: inline-block;
    top: 50px;
    height: 90px;
    width: 80px;
    border: 1px solid white;
    color: white;
    text-align: center;
    line-height: 100%;
    font-family: helvetica;
    font-size: 65pt;
    font-weight: bold;
}
#box1 {
    background-color: orange;
    left: 50px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    -webkit-animation: f 15s infinite; /* Chrome, Safari, Opera */
    animation: f 15s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes f {
    40% {border-bottom-left-radius: 15px;}
}

/* Standard syntax */
@keyframes f {
    40% {border-bottom-left-radius: 15px;}
}
#box2 {
    background-color: #e82d0c;
    left: 200px;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -ms-transform: skew(20deg);
    -o-transform: skew(20deg);
    transform: skew(20deg);
}
#box3 {
    background-color: #cc0aff;
    left: 350px;
    -webkit-transform: skew(0, 20deg);
    -moz-transform: skew(0, 20deg);
    -ms-transform: skew(0, 20deg);
    -o-transform: skew(0, 20deg);
    transform: skew(0, 20deg);
    background: #cc0aff;
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {background-color: #cc0aff;}
    to {background-color: blue;}
}

/* Standard syntax */
@keyframes mymove {
    from {background-color: #cc0aff;}
    to {background-color: blue;}
}
}
#box4 {
    background-color: #c2e80c;
    left: 500px;
}
#box5 {
    background-color: dimgray;
    left: 650px;
    position:relative;
    -webkit-animation: r 5s infinite; /* Chrome, Safari, Opera */
    -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
    animation: r 5s infinite;
    animation-direction: alternate;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes r {
    0%  {background: green; left: -85px; top: 0px;}
    25% {background: blue; left: 0px; top: 0px;}
    50% {background: yellow; left: 0px; top: -62px;}
    100% {background: red; left: 0px; top: 0px;}
}

@keyframes r {

    0%  {background: green; left: -85px; top: 0px;}
    25% {background: blue; left: 0px; top: 0px;}
    50% {background: yellow; left: 0px; top: -62px;}
    100% {background: red; left: 0px; top: 0px;}
}

/* Navigation */
nav {
    display: block;
    height: 2.5em;
    background-color:darkgrey;
    text-align: center;
}

nav ul {
    display: block;
}

nav ul li {
    display: inline;
    margin: 0em 0.188em 0em 0.188em;
}

nav ul li a {
    color: #454040;
    font-size: 1.125em;
    line-height: 2.5em;
    padding: 0.563em 0.938em 0.375em 0.983em;
    transition: background 0.2s;
    -webkit-transition: background 0.5s;
}

nav ul li a.active {
    border-bottom: 0.188em solid #E7590B;
}

nav ul li a:hover {
    background: #DBD9D8;
    border-bottom: 0.188em solid #E7590B;
}

/* Content Area */

#main {
    display:block;
    width: 96%;
    max-width: 980px;
    margin: 1.25em auto;
    padding: 0em;
}

#main article {
    display: inline-block;
    width: 65.3%;
    background: #FFFFFF;
    vertical-align: top;
    margin: 0em;
    padding: 0em;
    text-align: center;   
}

#main article img {
    max-width: 560px;
    box-shadow: 0px 0px 10px -5px #4C4948;
    border-radius: 8px;
}

#main aside {
    display: inline-block;
    width: 30.6%;
    margin-left: 3%;
    padding: 0em;
    vertical-align: top;
}

#main aside section {
    margin-bottom: 1.563em;
    background: #FFFFFF;
    border-bottom: 0.188em solid #E7590B
}

#main article h2 {
    padding: 1em 1.8em 1em 1.8em;
}

#main aside section ul {
    padding: 0em 1.875em 1.25em 2.5em;
}

#main aside section ul li a:hover {
    border-bottom: 0.15em solid #E7590B;
}



/* Footer */

footer {
    display: block;
    background: #2F2C2C;
    text-align: center;
}

footer ul {
    display: block;
    width: 100%;
    max-width: 980px;
    text-align: left;
    margin: 0px auto;
}

footer ul li {
    display: inline;
    font-size: 0.8em;
    line-height: 2.8em;
    color: #E2DBDB;
    padding: 0em 0.625em 0em 0.625em;
}

footer ul li a {
    color: #E2DBDB;
    transition: background 0.2s;
    -webkit-transition: background 0.5s;
}

footer ul li a:hover {
    border-bottom: 0.188em solid #E7590B;
}
/* Mobile Ansicht */

@media screen and (max-width:800px) {
    body {
        font-size: 90%;
    }
}

@media screen and (max-width:600px) {
    #main aside, #main article {
         display: block;
        margin: 0.625em 0em 0.625em 0em;
    }
}

@media screen and (min-width:550px) {
    nav.nav {
        display: block !important;
    }
}

@media screen and (max-width:550px) {
    body {
        font-size: 86%;
    }
    #menubar ul li a.menubutton {
        display: block;
    }
    nav {
        display: none;
        height: auto;
    }
    nav ul li {
        display: block;
        margin: 0.3em 0em 0.3em 0em;
    }
}
 
Das Script läuft nicht, weil die jQuery-Syntax in der letzten Zeile fehlerhaft, präziser unvollständig ist.

Lauffähiges Script - exklusiv mit Einrückungen formatiert, um den syntaktischen Überblick zu behalten :D
Code:
$(document).ready(function(){
  $("#about").load("about.html");
  $("#kontent1").click(function(){
    $("#service").load("service.html");
  });
  $("#kontent2").click(function(){
    $("#kontakt").load("kontakt.html");
  });
  $("#kontent3").click(function(){
   $("#imprint").load("imprint.html");
  });
  $("#kontent4").click(function(){});
});
Ich möchte einen Kontent wechsel haben. Der von der Navi aus gesteuert wird.
Wenn von <nav> die Rede ist, wovon ich jetzt einfach mal ausgehe, gehören die einzelnen Selektor-Paare (#kontent1 / #about, ...) getauscht, andernfalls ändert sich der Inhalt der Links ;)
Code:
$(document).ready(function(){
  $("#kontent1").load("about.html");
  $("#service").click(function(){
    $("#kontent2").load("service.html");
  });
  $("#kontakt").click(function(){
    $("#kontent3").load("kontakt.html");
  });
  $("#imprint").click(function(){
    $("#kontent4").load("imprint.html");
  });
});
Vermutlich stellst Du Dir den Wechsel aber insgesamt ganz anders vor :cool:
Und fällt Dir hier etwas auf?
HTML:
<a href="#" id="kontakt"Kontakt</a>
 
Zuletzt bearbeitet:

Neue Beiträge

Zurück