javascript - 我如何才能将 css 类仅添加到使用 jQuery 单击的 h3 标记

Question

<li>
  <div id="lineop1"><a href="php/fabric/process1.php"><h3>Softshell</h3></a></div>
</li>
<li>
  <div id="lineop1"><a href="php/fabric/process1.php"><h3>Option</h3></a></div>
</li>
<li>
  <div id="lineop1"><a href="php/fabric/process1.php"><h3>Option 1</h3></a></div>
</li>

我需要显示点击了哪一个 h3 标签以显示事件

Answer 1

你需要像下面那样做:-

$(document).ready(function(){
  $('.lineop1 a h3').click(function(e){
      e.preventDefault(); // to prevent page refresh with new url
      $('h3').removeClass('active'); // remove active class from other h3 tag
      $(this).addClass('active'); // add active class to current clicked tag
  });
});

.active{
  color:green;
  font-size:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>
  <div class="lineop1"><a href="php/fabric/process1.php"><h3>Softshell</h3></a></div>
</li>
<li>
  <div class="lineop1"><a href="php/fabric/process1.php"><h3>Option</h3></a></div>
</li>
<li>
  <div class="lineop1"><a href="php/fabric/process1.php"><h3>Option 1</h3></a></div>
</li>

注意:- id每个元素都必须是唯一的。所以转换id至 class周围<div's>

如果您需要，请点击 h3页面刷新时，也会对应h3标签有事件类，那么你必须使用 localstorage概念如下:-

jQuery:-

$(document).ready(function(){
    $('ul li').eq( localStorage.parent ).find('h3').addClass('active');
    $('.lineop1 a h3').click(function(e){
        var pagename = $(location).attr("href").split('/').pop();
        localStorage.parent=$(this).closest('li').index();
    });
});

HTML:-

<ul>
    <li>
      <div class="lineop1"><a href="process1.php"><h3>Softshell</h3></a></div>
    </li>
    <li>
      <div class="lineop1"><a href="process1.php"><h3>Option</h3></a></div>
    </li>
    <li>
      <div class="lineop1"><a href="process1.php"><h3>Option 1</h3></a></div>
    </li>
</ul>

我已经在本地主机上对其进行了测试，并且运行良好。