2012-01-02 85 views
0

如何将它放在一起?我在这个网站上工作,要求每次点击菜单中的某个项目时,两个特定DIV的背景位置会发生变化并保持选择状态。如何使用另一个元素的onClick事件更改div的backgroundPosition

这里是我的尝试:

首先,我创建了一个变量“P”,以节省网址/地址选定的页面,因此,例如,如果你在关于我们,你可能会看到这样的事情上地址栏:

website.com/index.php?p=aboutus

在菜单,按钮关于我们我这样做是通过调用函数changeBG的onClick:

<a href="?p=aboutus" onclick="changeBG()">About Us</a> 

我想我需要JavaScript来做伎俩,这里是我的股票。

这是云头中的脚本:

<script type="text/javascript"> 
    <? 
// Set "p" value to HOME if previously empty. 
if ($_GET['p']=='') $_GET['p']='home'; 
    ?> 
function changeBg(pvalue) { 
if (pvalue == '') {pvalue = '<?=$_GET['p'];?>'; 
    } 
    if (pvalue=='aboutus'){ 
    document.getElementById('this_is_the_first_to_be_changed').style.backgroundPosition=0 20px; 
      document.getElementById('this_is_the_other_to_be_changed').style.backgroundPosition=0 80px; 

      if (pvalue=='contactus'){ 
      document.getElementById('this_is_the_first_to_be_changed').style.backgroundPosition=0 10px; 
        document.getElementById('this_is_the_other_to_be_changed').style.backgroundPosition=0 100px; 
    } 

      } 
    </script> 

这就是那张体:

<div id="left_menu"> 
<a href="?p=aboutus" onclick="changeBG()">About Us</a> 
<a href="?p=contact" onclick="changeBG()">Contact Us</a> 
</div> 
<div id="this_is_the_first_to_be_changed"> 
</div> 
<div id="this_is_the_other_to_be_changed"> 
</div> 

任何人都可以找出为什么不起作用?

+1

我不知道它为什么不起作用,但我强烈要求你不要混淆你的业务逻辑和显示逻辑。只是因为PHP使它成为可能,并不意味着它是一个好主意。很快你就会发现完全不可读的代码(如上例所示)。试图弄清楚哪些部分是PHP和哪些部分是Javascript是绝对的噩梦(因为它们是如此相似的外观语言),所以你应该尽一切可能使它们保持独立。 – 2012-01-02 20:25:02

+0

我同意你的看法,但你看到的只是冰山的一部分。你可以在整个项目中挑选一下: www.daterraweb.com/projects/brazilpax/site/v1/ 我实际上想要做的是将左侧和顶部菜单分别移动蓝色箭头上下和侧身,所以他们会匹配完整的黄色箭头。如果你有一个更好的主意,请 – 2012-01-02 22:00:21

回答

0

尝试使用引号: style.backgroundPosition =“0 20px”;

修订

而且,你看这个行: p值= '';

要设置p值= '=关于我们'

修订

脚本元素是不正确的:

<script type="java/text"> 

权:

<script type="text/javascript"> 

除了使用萤火虫或chrome来查看页面中生成的JS。

+0

编号。行情没有做到这一点,但我想知道是否使用它,不会将值变成一个字符串? – 2012-01-02 21:57:42

+0

是的......那个理想。用p的值填充pvalue。P是单击菜单上的项目时值发生变化的变量。我使用href =“?p = aboutus”来做到这一点。无论如何。 pvalue正在接收正确的内容。问题在于条件。如果你想看到真正的项目,请访问,www.daterraweb.com/projects/brazilpax/site/v1/ – 2012-01-02 22:14:46

+0

哦..我明白你在说什么。是的,它是多余的,但最终pvalue仍然获得正确的价值。 – 2012-01-02 22:22:36

相关问题