title: How to make link unclickable using CSS or jquery?
body: <p>I have the following HTML.</p>
  
  <pre><code>&lt;ul class="static"&gt;
      &lt;li class="static dynamic-children"&gt;
          &lt;a class="static dynamic-children menu-item" href="test.php" tabindex="0"&gt;
              &lt;span class="additional-background"&gt;
                  &lt;span class="menu-item-text"&gt;Link&lt;/span&gt;
              &lt;/span&gt;
          &lt;/a&gt;
          &lt;ul class="dynamic"&gt;
          &lt;/ul&gt;
       &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>As you can see when I click on "Link" then it takes me to "test.php" page. I want this "Link" to be unclickable like you place "#" for e.g. href="#"</p>
  
  <p>Is it possible to do this using CSS or Jquery? Can't use Javascript's <strong>document.getElementById</strong> because there is no ID defined for this element.</p>