php - 根据查询字符串添加类：active到div

Question

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.

Answer 1

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.