我有一个演示网站，我一直在尝试一些功能。我要做的是只显示div与绿色或蓝色的基础上，你点击进入页面的链接。
这是我现在使用的示例主页，但是它需要我建立3个单独的页面来显示结果;所有。php，绿色。php和蓝色。php。我想只有一个页面，隐藏或显示div需要
<?php
// which page should be shown now
$page = (isset($_GET['page']) && $_GET['page'] != '') ? $_GET['page'] : 'home';
// only the pages listed here can be accessed
// any other pages will result in error
$allowedPages = array('home',
'all',
'blue',
'green',
)
;
if (!in_array($page, $allowedPages) || !file_exists($page . '.php')) {
$page = 'notfound';
}
// set prettier title
//$title .= ($page != 'home') ? ' - ' . ucfirst($page) : '';
// start output buffering so headers can be used in sub pages
ob_start();
?> <html>
<head>
<title>tester</title>
<link rel="stylesheet" href="nav.css" type="text/css" media="all" />
<script type="text/javascript" src="sucker.js"></script>
</head>
<body>
<ul id="nav">
<li>
<a href="index.php?page=all">All Color</a>
</li>
<li>
<a href="index.php?page=green">Greew/a>
<ul>
<li>
<a href="index.php?page=blue">Blue</a>
</li>
</ul>
</li>
</ul>
<div class="clear"></div>
<?php
include($page . '.php');
?>
</body>
</html>
这是all.php
的内容 <div style="min-height: 245px; border: 2px solid transparent;" class="itemWrapper">
<a class="itemLink" href="http://www.demo.com/products/blue1.jpg">
<img src="images/products/hold.jpg" class="itemImage" style="width:150px;;height:150px;;"/></a>
<h3 class="itemTitle"> Blue Item 1</a></h3>
<p class="itemPrice">$5.00</p>
<img style="display: none;" class="quickViewBtn" src="images/products/quick_view.png" />
</div>
<div style="min-height: 245px; border: 2px solid transparent;" class="itemWrapper">
<a class="itemLink" href="http://www.demo.com/products/blue2.jpg">
<img src="images/products/hold.jpg" class="itemImage" style="width:150px;;height:150px;;"/></a>
<h3 class="itemTitle"> Blue Item 2</a></h3>
<p class="itemPrice">$3.00</p>
<img style="display: none;" class="quickViewBtn" src="images/products/quick_view.png" /></div>
<div style="min-height: 245px;" class="itemWrapper">
<a class="itemLink" href="http://www.demo.com/products/blue3.jpg">
<img src="images/products/hold.jpg" class="itemImage" style="width:150px;;height:150px;;"/></a>
<h3 class="itemTitle"> Blue Item 3</a></h3>
<p class="itemPrice">$4.00</p>
<img style="display: none;" class="quickViewBtn" src="images/products/quick_view.png" alt= "Quick View" /></div>
<div style="min-height: 245px;" class="itemWrapper last">
<a class="itemLink" href="http://www.demo.com/products/green1.jpg">
<img src="images/products/hold.jpg" class="itemImage" style="width:150px;;height:150px;;"/></a>
<h3 class="itemTitle"> Green Item 1</a></h3>
<p class="itemPrice">$1.00</p>
<img style="display: none;" class="quickViewBtn" src="images/products/quick_view.png" /></div>
<div style="min-height: 245px;" class="itemWrapper last">
<a class="itemLink" href="http://www.demo.com/products/green2.jpg">
<img src="images/products/hold.jpg" class="itemImage" style="width:150px;;height:150px;;"/></a>
<h3 class="itemTitle"> Green Item 2</a></h3>
<p class="itemPrice">$2.00</p>
<img style="display: none;" class="quickViewBtn" src="images/products/quick_view.png" /></div>
</div>
你能提供的任何帮助将是伟大的!
如果你想让它无缝，jQuery/JavaScript是一种方法，但既然你说这只是一种"测试"网站，我假设你这样做更多的是用PHP实验和乐趣。因此，您需要做的是将所有三个页面放入一个文件中，然后将所有三个页面包装在if…然后声明。有效:
<?php
if (!isset($_POST['page'])) {
//let the user make a choice
} else if ($_POST['page'] == 'green') {
?>
<!--HTML for the "green" pages goes here!-->
<?php
} else if ($_POST['page'] == 'blue') {
?>
<!--HTML for the "blue" pages goes here!-->
<?php
} else {
print("Invalid page selection!"); //Keep in mind, we want to "error check" to make sure the user actually selected a page
}
?>
如果你有更多的"页"，你应该使用一个switch语句。如果这是一个非常大的应用程序，你可以使用include()语句(但要确保你检查文件存在!)，并在你的应用程序中包含多个样式文件。
您可以将它们全部加载，并将它们放在不同的类中，然后使用jQuery加载它们。我做了一个例子-看看这里。
$(document).ready(function() {
$(".green").hide();
$(".blue").hide();
类似的东西-然后在按钮的点击中显示它们
在body标签中写入如下内容
<body class="
<?php
... if isset... if in_array
switch ($page)
{
case "green":
echo "body_green";
break;
case "blue":
echo "body_blue";
break;
default:
echo "";
}
?>
">
在你的CSS
.green, .blue {
display:none;
}
.body_green .green {
display: block;
}
...