Maison > développement back-end > tutoriel php > 求问。设置的header.php 如何按照点击的不同的按钮给对应的按钮设置样式

求问。设置的header.php 如何按照点击的不同的按钮给对应的按钮设置样式

WBOY
Libérer: 2016-06-13 12:07:43
original
1088 Les gens l'ont consulté

求问。设置的header.php 怎么按照点击的不同的按钮给对应的按钮设置样式
设置的header.php 怎么按照点击的不同的按钮给对应的按钮设置样式


header.php是导航栏,里面有几个按钮指向不同的网页,
我想要的效果是 按了第一个按钮进入了1.php,然后这第一个按钮能有个背景色,按了第二个按钮进入了2.php,然后这第二个按钮能有个背景色,第一个按钮变成原来的样子。
------解决思路----------------------
http://www.16sucai.com/daima/cd/ 这种吗 很多别人写好的 直接加到自己项目
------解决思路----------------------
请在页面当中引入jquery.
header.php代码:

 

<br /><script src="js/jquery-1.8.3.min.js"></script> <!--jquery文件请自行修改--><br /><style><br />#m1<br />{<br />    height: 50px;<br />    width: 500px;<br />    background: beige;<br />}<br />#page1<br />{<br />    width: 50%;<br />    height: 100%;<br />    float: left;<br />}<br />#page2<br />{<br />    width: 50%;<br />    height: 100%;<br />    float: left;<br />}<br /></style><br /><?php<br /><br />?><br /><div id="m1"><br />   <div id="page1"><br />   <a href="1.php?id=1">网页1</a><br />   </div><br />   <div id="page2"><br />   <a href="2.php?id=2">网页2</a><br />   </div><br /></div><br />
Copier après la connexion


1.php代码:
<br /><script src="js/jquery-1.8.3.min.js"></script><br /><style><br />#m1<br />{<br />    height: 50px;<br />    width: 500px;<br />    background: beige;<br />}<br />#page1<br />{<br />    width: 50%;<br />    height: 100%;<br />    float: left;<br />}<br />#page2<br />{<br />    width: 50%;<br />    height: 100%;<br />    float: left;<br />}<br />.onclick<br />{<br />    background: red;<br />}<br /></style><br /><?php<br />?><br /><div id="m1"><br />   <div id="page1"><br />   <a href="1.php?id=1">网页1</a><br />   </div><br />   <div id="page2"><br />   <a href="2.php?id=2">网页2</a><br />   </div><br /></div><br /><script><br />var id=<?php echo $_GET['id'];?>;<br />$("#page" + id).siblings().removeClass('onclick');<br />$("#page" + id).addClass('onclick');<br /></script><br />
Copier après la connexion


2.php代码:

<br /><script src="js/jquery-1.8.3.min.js"></script><br /><style><br />#m1<br />{<br />    height: 50px;<br />    width: 500px;<br />    background: beige;<br />}<br />#page1<br />{<br />    width: 50%;<br />    height: 100%;<br />    float: left;<br />}<br />#page2<br />{<br />    width: 50%;<br />    height: 100%;<br />    float: left;<br />}<br />.onclick<br />{<br />    background: red;<br />}<br /></style><br /><?php<br /><br /><br />?><br /><div id="m1"><br />   <div id="page1"><br />   <a href="1.php?id=1">网页1</a><br />   </div><br />   <div id="page2"><br />   <a href="2.php?id=2">网页2</a><br />   </div><br /></div><br /><script><br />var id=<?php echo $_GET['id'];?>;<br />$("#page" + id).siblings().removeClass('onclick');<br />$("#page" + id).addClass('onclick');<br /></script><br /><br />运行之后,你会得到你想要的.<br />
Copier après la connexion

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal