2012-11-30 4 views
1

Ma page est plutôt simple et directe. Je commence par appeler des pages PHP externes en tant qu'éléments de ma page en utilisant des balises DIV. Ensuite, je cache les div qui ne sont pas nécessaires sur la page d'accueil et ensuite glisser dans la vue de la "page" voulu et cacher les indésirables.Comment consolider mon code? Problèmes basés sur JavaScript et PHP

Ce que je voudrais faire est de glisser dans le contenu voulu et de faire glisser ce que le contenu est actuellement actif/visible. Je sais que je peux continuer tout ce que j'ai déjà commencé à faire, mais le document entier serait tellement gonflé. Des idées? Merci!

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

    <script> 
    $(document).ready(function(e) { 
$(function(){ 
    $("div.design, div.marketing").hide(); 
    }); 
}); 

    $(document).ready(function() { 

$("h3.home_button").click(function() { 
     $("div.home").show("slide", { direction: "left" }, 500); 
     $("div.design").hide(); 
     $("div.marketing").hide(); 
}); 

$("h3.design_button").click(function() { 
     $("div.design").show("slide", { direction: "left" }, 500); 
     $("div.home").hide(); 
     $("div.marketing").hide(); 
}); 

$("h3.marketing_button").click(function() { 
     $("div.marketing").show("slide", { direction: "left" }, 500); 
     $("div.home").hide(); 
     $("div.design").hide(); 
}); 


    }); 
    </script> 

</head> 

<body> 

<div class="main"> 

    <div class="header"> 
     <?php include("header.php");?> 
    </div> 

    <div class="menu"> 
     <?php include("menu.php");?> 
    </div> 

    <div class="content"> 
     <?php include("content_home.php");?> 
     <?php include("content_design.php");?> 
     <?php include("content_marketing.php");?> 

    </div> 
    <div class="footer"><?php include("footer.php");?></div> 

</div> 

Répondre

0

Vous pouvez utiliser le data attributes et l'accès par la méthode data() jquery.

dans votre code HTML

<h3 data-a='marketing'>marketing</h3> 
<h3 data-a='design'>design</h3> 
<div class='container'> 
    <div style='display:none;' class='marketing'> 
     marketing stuffs 
    </div> 
    <div class='design'> 
     design stuffs 
    </div> 
</div>​ 

et dans votre javascript

$('h3').click(function(){ 
    type = $(this).data('a'); 

    $('.container div').hide(); 
    $('.container').find('.'+type).show(); 
})​ 

Voici un exemple fiddle

vous aussi appelez la méthode prêt deux fois

Questions connexes