设置的header.php 怎么按照点击的不同的按钮给对应的按钮设置样式
header.php是导航栏，里面有几个按钮指向不同的网页，
我想要的效果是 按了第一个按钮进入了1.php，然后这第一个按钮能有个背景色，按了第二个按钮进入了2.php，然后这第二个按钮能有个背景色，第一个按钮变成原来的样子。
回复讨论(解决方案)
http://www.16sucai.com/daima/cd/ 这种吗 很多别人写好的 直接加到自己项目
可不可以用js判断然后再怎么做
请在页面当中引入jquery.
header.php代码:
1 | <script src="js/jquery-1.8.3.min.js"></script> <!--jquery文件请自行修改--><style>#m1{ height: 50px; width: 500px; background: beige;}#page1{ width: 50%; height: 100%; float: left;}#page2{ width: 50%; height: 100%; float: left;}</style><?php?><div id="m1"> <div id="page1"> <a href="1.php?id=1">网页1</a> </div> <div id="page2"> <a href="2.php?id=2">网页2</a> </div></div>
|
登入後複製
1.php代码:
1 | <script src="js/jquery-1.8.3.min.js"></script><style>#m1{ height: 50px; width: 500px; background: beige;}#page1{ width: 50%; height: 100%; float: left;}#page2{ width: 50%; height: 100%; float: left;}.onclick{ background: red;}</style><?php?><div id="m1"> <div id="page1"> <a href="1.php?id=1">网页1</a> </div> <div id="page2"> <a href="2.php?id=2">网页2</a> </div></div><script>var id=<?php echo $_GET['id'];?>;$("#page" + id).siblings().removeClass('onclick');$("#page" + id).addClass('onclick');</script>
|
登入後複製
2.php代码:
1 | <script src="js/jquery-1.8.3.min.js"></script><style>#m1{ height: 50px; width: 500px; background: beige;}#page1{ width: 50%; height: 100%; float: left;}#page2{ width: 50%; height: 100%; float: left;}.onclick{ background: red;}</style><?php?><div id="m1"> <div id="page1"> <a href="1.php?id=1">网页1</a> </div> <div id="page2"> <a href="2.php?id=2">网页2</a> </div></div><script>var id=<?php echo $_GET['id'];?>;$("#page" + id).siblings().removeClass('onclick');$("#page" + id).addClass('onclick');</script>运行之后,你会得到你想要的.
|
登入後複製
