通过php / javascript更改href的类

时间:2016-01-11 14:33:43

标签: javascript php html

我有一个包含5个不同href的菜单。

每个href引用相同的页面但不同的ID:

<a href="Planning.php?id=1" id="MenuButton1" class="MenuButton">Line 1</a>
<a href="Planning.php?id=2" id="MenuButton2" class="MenuButton">Line 2</a>
<a href="Planning.php?id=3" id="MenuButton3" class="MenuButton">Line 3</a>
<a href="Planning.php?id=4" id="MenuButton4" class="MenuButton">Line 4</a>
<a href="Planning.php?id=5" id="MenuButton5" class="MenuButton">Line 5</a>

现在我希望我的代码中有一些内容可以在我获得某个ID时更改href的类(用于css目的)。类似于选定的href。

是否可以通过php或javascript更改我的课程?

例如:

if($_GET['id'] == 1)
{
     MenuButton1.class= "SelectedLink";
}

3 个答案:

答案 0 :(得分:1)

您可以执行以下操作,而不只是分配课程:

<a href="Planning.php?id=1" id="MenuButton1" class="MenuButton<?= (isset($_GET['id']) && $_GET['id'] == 1) ? ' SelectedLink' : ''; ?>">Menu Item 1</a>

这样,只有在SelectedLink为`。

时才会分配课程$_GET['id']

修改

您还可以使用PHP构建完整的菜单:

// Create an array containing your menu items
$menuItems = array(
    '1' => 'Line 1',
    '2' => 'Line 1',
    '3' => 'Line 1',
    '4' => 'Line 1',
    '5' => 'Line 1',
);
<!-- Loop through the array and write your menu items -->
<?php foreach ($menuItems as $item => $name): ?>
    <a href="Planning.php?id=<?= $item; ?>" id="MenuButton<?= $item; ?>" class="MenuButton<?= (isset($_GET['id']) && $_GET['id'] == $item) ? ' SelectedButton' : ''; ?>">Menu Item <?= $name; ?></a>
<?php endforeach; ?>

上述foreach将编写您的菜单项。如前所述,在课堂上我使用了简写if语句。这将检查当前循环菜单项是否与您的$_GET参数匹配。如果是这样,它会写一个额外的课程。

答案 1 :(得分:0)

如果$ _GET [&#39; id&#39;]等于$ i,请使用Class SelectedLink而不是MenuButton。

<?
for ($i=0; $i < 5; $i++) { 
    ?>
    <a href="Planning.php?id=<?=$i+1?>" id="MenuButton<?=$i+1?>" class="<?=$i!=($_GET['id']-1)?'MenuButton':'SelectedLink'?>">Line <?=$i+1?></a>
    <?
}
?>

答案 2 :(得分:0)

您可以根据元素标记名更改css类描述,使用或不使用正则表达式更改属性,具体取决于您要执行的操作。 例如:

.MenuButton { color: black; }
.MenuButton[id=MenuButton2] { color: red; }
.MenuButton[href$='1'] { color: green; } /* all ending with 1 - ie. 1 11 111 */
.MenuButton[href$='=1'] { color: blue; } { color: blue; } /* just =1 */