Vereinfachen Eines Skriptes & laden

Hallo zusammen.
Da ich noch am js lernen bin brauch ich mal kurtz eure hilfe:

ich habe auf meiner website eine navigation mit 4 buttons und eine section="content". mit jedem button kan ich den inhalt einer externen .html in die section="content" laden das funktionirt so auch schon mal gut. meine frage ist kann ich das noch kompakter machen? und wie kann sobald ich die website aufrufe den content home automatisch ladaen?

HTML:
            <ul>
                <li class="nh"><a id="m_home">DeskToper</a></li>
                <li class="n1"><a id="m_shop">Shop</a></li>
                <li class="n2"><a id="m_team">Team</a></li>
                <li class="n3"><a id="m_service">Service</a></li>
                <li class="quebec">&nbsp;</li>
            </ul>

HTML:
<section id="main">
</section>

Java:
$(document).ready(function() {
   $('#m_home').click( function() {
     var text = $(this).text();
     $("#main").load("content/home.html");
   });           
});
$(document).ready(function() {
   $('#m_shop').click( function() {
     var text = $(this).text();
     $("#main").load("content/shop.html");
   });           
});
$(document).ready(function() {
   $('#m_team').click( function() {
     var text = $(this).text();
     $("#main").load("content/team.html");
   });           
});
$(document).ready(function() {
   $('#m_service').click( function() {
     var text = $(this).text();
     $("#main").load("content/service.html");
   });           
});



ich freue mich auf ihre hilfe.

ps: ich habe bereits gegoogelt aber nichts gefunden was meinen vorstellungen entsprach.
 
Mal auf die schnelle, denke da dies so meinst.

HTML:
<ul>
    <li class="nh navi_js" id="m_home">DeskToper</li>
    <li class="n1 navi_js" id="m_shop">Shop</li>
    <li class="n2 navi_js" id="m_team">Team</li>
    <li class="n3 navi_js" id="m_service">Service</li>
    <li class="quebec">&nbsp;</li>
</ul>

<section id="main">

</section>

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

<script>
$(document).ready(function() {

  $("#main").load("content/m_home");

  $(".navi_js").click(function() {
    var id = $(this).attr("id");
    $("#main").load("content/"+id);
  });
});

</script>

Habe zu Deiner Class noch eine hinzugefügt (navi_js), und dann eine Funktion erstellt, beim Klicken aufgerufen wird.
Dann lese ich aus was in der ID steht, und übergebe dies dann in den load Befehl.

So würde ich dies lösen, aber ich programmiere auch nur Hobby mäßig, evtl. geht es noch schöner.
 
Zuletzt bearbeitet:
Hay danke für die schnelle antwort. leider funtkionirt bei mir das so nicht. ich weiss nicht ob es einen fehler hatt oder ob es mich einfach nur ärgern möchte. ich hoffe du hast sonst noch eine idee. Freundlich grüsse.

A.Spitzer
 
Soweit schon sehr gut! Allerdings ist die ID nicht genau gleich dem Namen der HTML-Datei. Statt die ID zweckzuentfremden, würde ich vorschlagen, ein data-Attribut zu verwenden, wie HTML es vorsieht:
HTML:
<li class="nh navi_js" data-filename="home" id="m_home">DeskToper</li>
Code:
[*]  $(".navi_js").click(function() {
    var filename = $(this).attr("data-filename");
    $("#main").load("content/"+ filename + ".html");
  });
 
dan müsste das so ausehen?

HTML:
<li class="nh navi_js" data-filename="home"><a id="m_home">DeskToper</a></li>
<li class="n1 navi_js" data-filename="shop"><a id="m_shop">Shop</a></li>
<li class="n2 navi_js" data-filename="team"><a id="m_team">Team</a></li>
<li class="n3 navi_js" data-filename="service"><a id="m_service">Service</a></li>


und

Code:
  $(".navi_js").click(function() {
    var filename = $(this).attr("data-filename");
    $("#main").load("content/"+ filename + ".html");
  });
 
[...] meine frage ist kann ich das noch kompakter machen? [...]
Java:
$(document).ready(function() {
   $('#m_home').click( function() {
     var text = $(this).text();
     $("#main").load("content/home.html");
   });         
});
$(document).ready(function() {
   $('#m_shop').click( function() {
     var text = $(this).text();
     $("#main").load("content/shop.html");
   });         
});
$(document).ready(function() {
   $('#m_team').click( function() {
     var text = $(this).text();
     $("#main").load("content/team.html");
   });         
});
$(document).ready(function() {
   $('#m_service').click( function() {
     var text = $(this).text();
     $("#main").load("content/service.html");
   });         
});
Ja. Ein $(document).ready(function() {} genügt hier vollkommen.
Code:
$(document).ready(function() {
   // jQuery-Scripts
});
 
Zuletzt bearbeitet:
oki danke. jetz ist meine andere frage noch wie mache ich das:
Java:
$(document).ready(function() {
   $('#m_home').click( function() {
     var text = $(this).text();
     $("#main").load("content/home.html");
   });

sobald die seite lädt/geladen hatt ausgeführt wird?
 
oki danke. jetz ist meine andere frage noch wie mache ich das:
Java:
$(document).ready(function() {
   $('#m_home').click( function() {
     var text = $(this).text();
     $("#main").load("content/home.html");
   });

sobald die seite lädt/geladen hatt ausgeführt wird?
Hat Dir @DerKleene1 zwar schon zu Beginn des Themas in Post #2 gezeigt, aber gerne nochmal - siehe Zeile 3:
Code:
$(document).ready(function() {

   $("#main").load("content/home.html");

  // Klick-Buttons
    
});
[edit]Tipp-Ex[/edit]
 
Zuletzt bearbeitet:
Mal mit den Änderungen von @Sempervivum getestet. Es klappt wunderbar.
HTML:
<ul>
  <li class="nh navi_js" data-filename="home"><a id="m_home">DeskToper</a></li>
  <li class="n1 navi_js" data-filename="shop"><a id="m_shop">Shop</a></li>
  <li class="n2 navi_js" data-filename="team"><a id="m_team">Team</a></li>
  <li class="n3 navi_js" data-filename="service"><a id="m_service">Service</a></li>
  <li class="quebec">&nbsp;</li>
</ul>

<section id="main">

</section>

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

<script>
$(document).ready(function() {

  $("#main").load("content/home.html");

  $(".navi_js").click(function() {
    var filename = $(this).attr("data-filename");
    $("#main").load("content/"+ filename + ".html");
  });
});

</script>

Wie man in der Console (F12 in den meisten Browsern) sehen kann.
https://jsfiddle.net/uvg1yg3q/2/
 
Ich finde den Ansatz von dir, DerKleen1, die Click-Handler in einem zusammen zu fassen, sehr gut! Der TO hat ja explizit gefragt, wie man seinen Code kompakter machen kann. Außerdem kann man das Ganze auf diese Weise erweitern, indem man das nur HTML ändert und muss das Javascript nicht anfassen. Bedauerlich, dass Du, Spicelab, das ignorierst.
 
Zuletzt bearbeitet:
Zurück