2012-11-30 5 views
1

Моя страница довольно проста и прямая. Сначала я вызываю внешние страницы PHP как элементы моей страницы, используя теги DIV. Затем я скрываю div, которые не нужны на домашней странице, а затем вставляют в поле зрения нужную «страницу» и скрывают нежелательные.Как я могу консолидировать свой код? Проблемы с JavaScript и PHP

То, что я хотел бы сделать, - это скользить в желаемом контенте и выводить содержимое активного содержимого в текущий момент. Я знаю, что могу просто продолжить работу над тем, что я уже начал делать, но весь документ был бы раздутым. Есть идеи? Благодаря!

<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> 

ответ

0

Вы можете использовать data attributes и доступ к нему с помощью метода data() Jquery.

в вашем 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>​ 

и в вашем JavaScript

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

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

Вот Exemple fiddle

Также вы вызываете готовый метод дважды

 Смежные вопросы

  • Нет связанных вопросов^_^