PHP三种方式实现页面切换

HTML语言设置一个目录对应一个文本框

一个a标签对应一个div

方法一:在一个php文件里,多个a标签对应一个div

<li>
    <a href=".对应的PHP文件位置.php?cat=1">目录1</a>
	 <a href=".DEMO.php?cat=2">目录2</a>
	 <a href=".DEMO.php?cat=3">目录3</a>
</li>

 <div id="d1" <?php if(isset($_GET['cat']) && ($_GET['cat'] == '' 
         ||$_GET['cat'] == '1')) echo 'style="display:block;"'; else 
         echo 'style="display:none;"'; ?>>内容1</div>
<div id="d2" <?php if(isset($_GET['cat']) && ($_GET['cat'] == '2'))
         echo 'style="display:block;"'; else echo 'style="display:none;"';
         >>内容2</div>
<div id="d3" <?php if(isset($_GET['cat']) && ($_GET['cat'] == '3'))
         echo 'style="display:block;"'; else echo 'style="display:none;"';
         >>内容3</div>

方法二:在一个php文件里,多个a标签对应多个div

<li>
     <a onclick="show(1)" href="javascript: void(0);">目录1</a>
	 <a onclick="show(1)" href="javascript: void(0);">目录2</a>
	 <a onclick="show(1)" href="javascript: void(0);">目录3</a>
	 <--javascript: void(0);是为解决onclick和href的冲突问题 -->
</li>

<div id="d1" name="dv">内容1</div>
<div id="d2" name="dv">内容2</div>
<div id="d3" name="dv">内容3</div>

<script>//定义一个方法传参数id for循环等于当前参数id的显示,其他的隐藏
        function show(id){
        	var divs = document.getElementsByName("dv");
            for (var i = 0 ; i < divs.length ; i++){
            	if (divs[i].id == "d"+id ){
            		divs[i].style.display="";
                }else{
                	divs[i].style.display="none";
                }
            }
        }
</script>

方法三:在多个php文件里,一个a标签对应一个php文件

多个a标签对应建立多个php文件,php文件为a标签对应的div 内容

demo1.php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	</style>
</head>
<body>
<li>
     <a href=".demo1.php?">目录1</a>
	 <a href=".demo2.php?">目录2</a>
	 <a href=".demo3.php?">目录3</a>
</li>
<div>内容1</div>
</body>
</html>

demo2.php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	</style>
</head>
<body>
<li>
     <a href=".demo1.php?">目录1</a>
	 <a href=".demo2.php?">目录2</a>
	 <a href=".demo3.php?">目录3</a>
</li>
<div>内容2</div>
</body>
</html>

demo3.php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	</style>
</head>
<body>
<li>
     <a href=".demo1.php?">目录1</a>
	 <a href=".demo2.php?">目录2</a>
	 <a href=".demo3.php?">目录3</a>
</li>
<div>内容3</div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_43488742/article/details/90302065