Highlight open anchor div from the same page

Question

I have a page with several links that go in certain points of the same HTML page, however, besides going to the location of the id I wanted to highlight this id by changing the background or adding border, for example:

body,
.menus {
  margin: 0;
  padding: 0;
  background: #000;
}

.menus li {
  list-style: none;
  background: #060;
  width: 200px;
}

ul li a {
  text-decoration: none;
  display: block;
  padding: 10px;
  color: #fff;
  font-family: sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 700;
  width: 180px;
  border: 1px solid #000000;
}

ul li a:hover {
  border: 1px solid #00ff00;
}

.zat {
  background: #222;
  padding: 25px;
  margin: 15px;
  color: #FFF;
  float: left;
  postition: relative;
  clear: both;
}

<table width="27%" border="0" cellspacing="0" cellpadding="0" height="480" align="left" style="position:fixed;top:0;left:0;">
  <tr>
    <td>

      <div class="menu-container">
        <ul class="menus clearfix">
          <li><a href="#teste">Imagem 001</a></li>
          <li><a href="#imagem">Imagem 002</a></li>
          <li><a href="#testando">Imagem 003</a></li>
          <li><a href="#imagens">Imagem 004</a></li>
          <li><a href="#testar">Imagem 005</a></li>
          <li><a href="#foto">Imagem 006</a></li>
          <li><a href="#fotox">Imagem 007</a></li>
        </ul>

      </div>

    </td>
  </tr>
</table>
<table width="28%" border="0" cellspacing="0" cellpadding="0" height="480" align="left">
  <tr>
    <td></td>
  </tr>
</table>
<table width="69%" border="0" cellspacing="0" cellpadding="0" height="100%">
  <tr>
    <td>
      <div id="meio" style="padding:10px;">

        <h1 id="foto">foto</h1>
        <div class="zat" id="imagens">
          <a href="#"><img src="https://1.bp.blogspot.com/_3Lvxu8anRxc/SnLZTtQilmI/AAAAAAAADFE/AA_E_0tt_mU/s320/DSC05521.JPG" width="120" height="120" border="0" /></a>
        </div>
        <div class="zat" id="teste">
          <a href="#"><img src="https://2.bp.blogspot.com/_3Lvxu8anRxc/SnGRhk_E_ZI/AAAAAAAADEk/tEwemAR_Ah8/s320/DSC05494.JPG" width="120" height="120" border="0" /></a>
        </div>
        <div class="zat" id="imagem">
          <a href="#"><img src="https://4.bp.blogspot.com/_3Lvxu8anRxc/SnGRh4VFCMI/AAAAAAAADEs/KHDOlc1OMY0/s320/DSC05506.JPG" width="120" height="120" border="0" /></a>
        </div>
        <div class="zat" id="testando">
          <a href="#"><img src="https://4.bp.blogspot.com/_3Lvxu8anRxc/SnAsBx6qpFI/AAAAAAAADEc/4WSehfGmBXU/s320/DSC05023.JPG" width="120" height="120" border="0" /></a>
        </div>
        <div class="zat" id="testar">
          <a href="#"><img src="https://2.bp.blogspot.com/_3Lvxu8anRxc/Sm2FjZ75TPI/AAAAAAAADD8/Ni16I6pRQXA/s320/DSC05476.JPG" width="120" height="120" border="0" /></a>
        </div>

        <div class="zat" id="fotox">
          <a href="#"><img src="https://1.bp.blogspot.com/_3Lvxu8anRxc/SmMyWiCNw7I/AAAAAAAAC_I/hyb2rWipkuA/s320/DSC05414.JPG" width="120" height="120" border="0" /></a>
        </div>
        <br/><br/>
      </div>
    </td>
  </tr>
</table>

Is it possible? I don’t know if you can do this with HTML and CSS or if you need Javascript.

Answer 1

In this your password you can use the selector :target for example change the color of the bg of the anchor that was "selected". To do this add the following code in your CSS

.zat:target {
  background: red;
}

Here you can read more about the :target https://developer.mozilla.org/en-US/docs/Web/CSS/:target

Run the code below to see working, whenever you click on the anchor link the corresponding anchored element gets the bg red. OBS: I haven’t touched anything in your HTMK, I just added the CSS lines above

body,
.menus {
  margin: 0;
  padding: 0;
  background: #000;
}

.menus li {
  list-style: none;
  background: #060;
  width: 200px;
}

ul li a {
  text-decoration: none;
  display: block;
  padding: 10px;
  color: #fff;
  font-family: sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 700;
  width: 180px;
  border: 1px solid #000000;
}

ul li a:hover {
  border: 1px solid #00ff00;
}

.zat {
  background: #222;
  padding: 25px;
  margin: 15px;
  color: #FFF;
  float: left;
  position: relative;
  clear: both;
}
.zat:target {
  background: #f00;
}

    

<table width="27%" border="0" cellspacing="0" cellpadding="0" height="480" align="left" style="position:fixed;top:0;left:0;">
  <tr>
    <td>

      <div class="menu-container">
        <ul class="menus clearfix">
          <li><a href="#teste">Imagem 001</a></li>
          <li><a href="#imagem">Imagem 002</a></li>
          <li><a href="#testando">Imagem 003</a></li>
          <li><a href="#imagens">Imagem 004</a></li>
          <li><a href="#testar">Imagem 005</a></li>
          <li><a href="#foto">Imagem 006</a></li>
          <li><a href="#fotox">Imagem 007</a></li>
        </ul>

      </div>

    </td>
  </tr>
</table>
<table width="28%" border="0" cellspacing="0" cellpadding="0" height="480" align="left">
  <tr>
    <td></td>
  </tr>
</table>
<table width="69%" border="0" cellspacing="0" cellpadding="0" height="100%">
  <tr>
    <td>
      <div id="meio" style="padding:10px;">

        <h1 id="foto">foto</h1>
        <div class="zat" id="imagens">
          <a href="#"><img src="https://1.bp.blogspot.com/_3Lvxu8anRxc/SnLZTtQilmI/AAAAAAAADFE/AA_E_0tt_mU/s320/DSC05521.JPG" width="120" height="120" border="0" /></a>
        </div>
        <div class="zat" id="teste">
          <a href="#"><img src="https://2.bp.blogspot.com/_3Lvxu8anRxc/SnGRhk_E_ZI/AAAAAAAADEk/tEwemAR_Ah8/s320/DSC05494.JPG" width="120" height="120" border="0" /></a>
        </div>
        <div class="zat" id="imagem">
          <a href="#"><img src="https://4.bp.blogspot.com/_3Lvxu8anRxc/SnGRh4VFCMI/AAAAAAAADEs/KHDOlc1OMY0/s320/DSC05506.JPG" width="120" height="120" border="0" /></a>
        </div>
        <div class="zat" id="testando">
          <a href="#"><img src="https://4.bp.blogspot.com/_3Lvxu8anRxc/SnAsBx6qpFI/AAAAAAAADEc/4WSehfGmBXU/s320/DSC05023.JPG" width="120" height="120" border="0" /></a>
        </div>
        <div class="zat" id="testar">
          <a href="#"><img src="https://2.bp.blogspot.com/_3Lvxu8anRxc/Sm2FjZ75TPI/AAAAAAAADD8/Ni16I6pRQXA/s320/DSC05476.JPG" width="120" height="120" border="0" /></a>
        </div>

        <div class="zat" id="fotox">
          <a href="#"><img src="https://1.bp.blogspot.com/_3Lvxu8anRxc/SmMyWiCNw7I/AAAAAAAAC_I/hyb2rWipkuA/s320/DSC05414.JPG" width="120" height="120" border="0" /></a>
        </div>
        <br/><br/>
      </div>
    </td>
  </tr>
</table>