如何仅在使用jQuery点击的H3标签中添加CSS类

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每个元素需要唯一。因此，在<div's>

周围将id转换为class

并且如果您想要在PAGE REFRESH时单击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>

我在末端对Localhost进行了测试，并且工作正常。

Answer 2

将单击处理程序添加到h3。将类active添加到它。

$(document).ready(function(){
    $(document).on('click','h3',function(){
        $('h3').removeClass('active');
        $(this).addClass('active');
    });
});

.active{
   color:#ff00eb;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li>
  <div id="lineop1"><a href="#"><h3>Softshell</h3></a></div>
</li>
<li>
  <div id="lineop1"><a href="#"><h3>Option</h3></a></div>
</li>
<li>
  <div id="lineop1"><a href="#"><h3>Option 1</h3></a></div>
</li>

编辑：将单击事件附加到最接近的唯一父元素。所以我包括了$(document).On。

请按照此链接查看直接vs删除事件的工作