How do i pass a variable via the url , changing the class of a dd and li based on variable?

I'm trying to build a site in foundation. I'm struggling with the next part.

First let me present a part of the code:

<dl class="contained tabs">
    <dd class="active"><a href="#contactForm">Neem contact op</a></dd>
    <dd><a href="#hoofdleiders">Hoofdleiders</a></dd>
    <dd><a href="#leiders">Leiders</a></dd>
    <dd><a href="#staf">Staf</a></dd>
  </dl>

<ul class="tabs-content contained">

    <li id="contactFormTab" class="active">
      <div class="row collapse">
        <div class="two columns"><label class="inline">Naam</label></div>
        <div class="ten columns"><input type="text" name="naam" id="naam" placeholder="Naam" value="' . (isset($_POST['naam']) ? htmlspecialchars($_POST['naam']) : '') . '" />
      </div>
      <div class="row collapse">
        <div class="two columns"><label class="inline">Email</label></div>
        <div class="ten columns"><input type="text" name="mail" id="mail" placeholder="[email protected]" value="' . (isset($_POST['mail']) ? htmlspecialchars($_POST['mail']) : '') . '" />
      </div>
      <div class="row collapse">
        <div class="two columns"><label class="inline">Onderwerp</label></div>
        <div class="ten columns"><input type="text" name="onderwerp" id="onderwerp" placeholder="onderwerp" value="' . (isset($_POST['mail']) ? htmlspecialchars($_POST['onderwerp']) : '') . '" />
      </div>

      <label>Wat wilt u zeggen?</label>

      <textarea id="bericht" name="bericht" rows="3">' . (isset($_POST['bericht']) ? htmlspecialchars($_POST['bericht']) : '') . '</textarea><br />

      <button type="submit" name="submit" class="radius button">Verstuur</button>

    </li>

<li id="hoofdleidersTab">
      <ul class="block-grid five-up">
        <li><a href="mailto:[email protected]"><img src="http://placehold.it/200x200&text=[persoon]" /><br />Naam 1</a></li>
        <li><a href="mailto:[email protected]"><img src="http://placehold.it/200x200&text=[persoon]" /><br />Naam 2</a></li>

      </ul>
    </li>
    <li id="leidersTab">
      <ul class="block-grid five-up">
        <li><a href="mailto:[email protected]"><img src="http://placehold.it/200x200&text=[persoon]" /><br />Naam 1</a></li>
        <li><a href="mailto:[email protected]"><img src="http://placehold.it/200x200&text=[persoon]" /><br />Naam 2</a></li>

      </ul>
    </li>
    <li id="stafTab">
      <ul class="block-grid five-up">
        <li><a href="mailto:[email protected]"><img src="http://placehold.it/200x200&text=[persoon]" /><br />Naam 1</a></li>
        <li><a href="mailto:[email protected]"><img src="http://placehold.it/200x200&text=[persoon]" /><br />Naam 2</a></li>

      </ul>
    </li>

So the dd class "active" and the li class "active" , make the tab highlighted.

My question is, how can i make the class to change to another <dd> item (lets say the 2nd one) and another li id (lets also say the second one) (hoofdleiders) using a variable passed in the url?

This is a part of a contact form, and I want to be able to land people right where they need to be.

Solution

I do not recommend implement in this way. You should use a framework or a pattern like MVC to manage your code better. However, in your case, this maybe a simple and clear solution.

Store each tab in a separated php file with the same name as the tab, for example, the staf.php file will like this:

  <ul class="block-grid five-up">
    <li><a href="mailto:[email protected]"><img src="http://placehold.it/200x200&text=[persoon]" /><br />Naam 1</a></li>
    <li><a href="mailto:[email protected]"><img src="http://placehold.it/200x200&text=[persoon]" /><br />Naam 2</a></li>
 </ul>

The main contact.php will be like this

<?php 
# list all available tabs
$tabs = array(
   'contactform' => 'Contact form', 
   'hoofdleiders' => 'Hoofdleiders', 
   'leiders' => 'Leiders', 
   'staf' => 'Staf',
);

# get the selected Tab from the url, if no tab is specified use the first tab
$selectedTab = filter_input(INPUT_GET, 'tab');
if (!in_array($selectedTab, $tabs))
    $selectedTab = $tabs[0];
?>   
<dl class="contained tabs">
    <?php foreach($tabs as $name => $label):?>
    <dd <?php echo ($tabName == $selectedTab ? "class='active'" : ""; ?>><a href="#<?php echo $name ?>"><?php echo $label ?></a></dd>
    <?php endforeach; ?>
</dl>

<ul class="tabs-content contained">
<?php foreach($tabs as $tabName): ?>
    <li id="<?php echo $tabName; ?>" <?php echo ($tabName == $selectedTab ? "class='active'" : ""; ?>>
        <?php require_once ($tabName . ".php"); ?>
    </li>
<?php endforeach; ?>
</ul>

In this case, the contact.php and all php files of each li must be in the same folder and can call the contact.php file in a URL like this contact.php?tab=staf