Ajax Ready/Click Funktion & verschiedene Stylesheets?

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Ajax Ready/Click Funktion & verschiedene Stylesheets?

    Servus,

    ich habe da ein kniffliges Problem, wo ich überhaupt nicht hintersteige. Ich möchte das der Hauptbereich (#main) meiner Seite, also zwischen Header/Slider und Fooder in den MainContainer geladen wird für jede meiner Seiten. Bedeutet also, dass wenn ein Besucher
    auf einen Link oder Menübutton klickt wird per Ajax Funktion der Inhalt dynmaischer rein geladen. Das funktioniert auch soweit, wie man in diesem Beispiel sieht (vier Unterseiten):

    Quellcode

    1. <script type="text/javascript">
    2. $(document).ready(function() {
    3. $("#start").click(function() {
    4. $("#main").animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
    5. $("#main").load("include/start.html", function() {
    6. $("#main").animate({opacity:"1", filter:"alpha(opacity=100)"}, 400);
    8. });
    9. });
    10. });
    11. $("#aboutus").click(function() {
    12. $("#main").animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
    13. $("#main").load("include/aboutus.html", function() {
    14. $("#main").animate({opacity:"1", filter:"alpha(opacity=100)"}, 400);
    16. });
    17. });
    18. });
    19. $("#services").click(function() {
    20. $("#main").animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
    21. $("#main").load("include/services.html", function() {
    22. $("#main").animate({opacity:"1", filter:"alpha(opacity=100)"}, 400);
    24. });
    25. });
    26. });
    27. $("#goals").click(function() {
    28. $("#main").animate({opacity:"0", filter:"alpha(opacity=0)"}, 400, function() {
    29. $("#main").load("include/goals.html", function() {
    30. $("#main").animate({opacity:"1", filter:"alpha(opacity=100)"}, 400);
    32. });
    33. });
    34. });
    35. });
    36. </script>
    Alles anzeigen


    Das Problem ist nur: jede Seite soll verschieden gestaltet sein und benötigt somit jeweils ein anderes Stylesheet. Allerdings hat das Generel Stylesheet welches für die index.html zuständig ist Priorität und somit werden
    die anderen Stylesheets ignoriert. Evtl. gehe ich dies auch falsch an und hoffe auf eure Unterstützung.

    - index.html > generel Stylesheet (auch gleich Startseite)
    - aboutus.html > aboutus Stylesheet
    - services > services Stylesheet
    - goals > goals Stylesheet

    Ist es überhaupt möglich mit dieser Funktion verschiedene Stylesheets anzusprechen, weil eigentlich ist das Problem ja, das eben die anderen Seiten (reines HTML5) in die index.html geladen werden, wodurch es ja auch klar ist, das kein
    anderes Stylesheet verwendet werden kann, als solches das für die index.html verlinkt wurde. Oder gibt da doch eine Lösung?
    Mit freundlichen Grüßen
    best regards

    Liv3pl4y

  • Du könntest jeder Seite einen speziellen Wrapper zuweisen und alles in einem Stylesheet lagern. Dies würde dann später auch einen Request sparen.

    Quellcode

    1. <!-- Seite goals -->
    2. <div class="foo" id="goals"></div>
    4. <!-- Andere Seite -->
    5. <div class="foo" id="andereSeite"></div>


    Und dann mit CSS arbeiten:

    Quellcode

    1. .foo {
    2. width: 100px;
    3. height: 100px;
    4. display: block;
    5. }
    7. #goals .foo {
    8. background: red;
    9. }
    11. #andereSeite .foo {
    12. background: orange;
    13. }
    Alles anzeigen


    Durch die spezifische Auswahl der Elemente, werden bisherige Regeln auf jeden Fall überschrieben.
    =O