I'm trying to change the css of a div based on the currant queystring of the page, the purpose is to show which link is currently active in the left menu.
The format of the URL will be WWW.mysite.co.uk/Folder/Folder2/Page.php?id=1
HTML
<div id="Left-Menu">
<div id="Left-Menu-Title"><p id="Left-Menu-Title-Text">Title</p>
</div>
<a href="?id=1"><div class="Left-Menu-Button">
<p class="Left-Menu-Button-Text" >Button1</p>
</div></a>
<a href="?id=2"><div class="Left-Menu-Button">
<p class="Left-Menu-Button-Text" >Button2</p>
</div></a>
<a href="?id=3"><div class="Left-Menu-Button">
<p class="Left-Menu-Button-Text" >Button3</p>
</div></a>
</div>
CSS
#Left-Menu-Title{
padding-top:20px;
padding-bottom:20px;
}
#Left-Menu-Title-Text{
padding-left:8px;
font-size:0.85em;
font-family:segoe UI;
line-height:16px;
color:#5b0400;
}
.Left-Menu-Button{
width:69px;
height:20px;
margin-bottom:5px;
}
p.Left-Menu-Button-Text{
padding-left:8px;
padding-top:1px;
font-size:0.95em;
font-family:segoe UI;
color:#a61407;
}
.Left-Menu-Button:hover{
background-color:#a61407;
opacity:0.6;
filter:alpha(opacity=60);
}
.Left-Menu-Button:hover p.Left-Menu-Button-Text, .Left-Menu-Button.hover p.Left-Menu-Button-Text {
display: block;
color:#ffffff;
}
.active{
width:69px;
height:20px;
margin-bottom:5px;
background-color:#a61407;
}
p.active{
padding-left:8px;
padding-top:1px;
font-size:0.95em;
font-family:segoe UI;
color:#ffffff;
}
a{
text-decoration:none;
}
How do I add the Class:active to the Left-Menu-Button and Left-Menu-Button-Text when the href = the same id as the querystring.
I believe you could add the class:active to the a tag by doing this:
<a href="?id=1" <?php
if($_SERVER['QUERY_STRING'] == "?id=1")
{
echo ' class="active" ';
}
?>
><div class="Left-Menu-Button">
<p class="Left-Menu-Button-Text" >Button1</p>
</div></a>
But is it possible to echo the Left-Menu-Button and Left-Menu-Button-Text div's instead.
Use PHPs $_GET variable.
<a href="?id=1" <?php if ( isset( $_GET['id'] ) && $_GET['id'] == 1 ) echo 'class="active"' ?>>
<div class="Left-Menu-Button">
<p class="Left-Menu-Button-Text" >Button1</p>
</div>
</a>
Or add it to the class attribute so that other classes can be added.
<a href="?id=1" class="<?php if ( isset( $_GET['id'] ) && $_GET['id'] == 1 ) echo "active " ?>new_class">
<div class="Left-Menu-Button">
<p class="Left-Menu-Button-Text" >Button1</p>
</div>
</a>
Just make sure to change the id value == 1
per element.
isset()
is used so that you're not checking against an undefined variable if the page url scheme doesn't have id
as a query string.
If I understand your question right this code should do it. I believe you are trying to make a link active if that is the current page you are on. Just add this code inside your class "".
<?php
if(isset($_GET['id']) AND $_GET['id'] == 1)
{
echo ' active';
}
?>
Maybe something along the lines of
<?php
$classActive = NULL;
if($_GET["id"] == 1){
$classActive = " active";
}
?>
<a href="?id=1">
<div class="Left-Menu-Button<?php echo $classActive; ?>">
<p class="Left-Menu-Button-Text<?php echo $classActive; ?>" >Button1</p>
</div>
</a>
<?php
$id = false;
if(isset($_GET['id']){
$id = $_GET['id'];
}
?>
<?php if($id == '1'): ?>
<a href="?id=1" class="active">
<?php else: ?>
<a href="?id=1">
<?php endif; ?>