jQuery在单击时环绕文本

Question

我有一个小菜单，单击后可以从其中加载html -files到div中。 我希望菜单项在单击时被包裹在一个跨度（或div）中，以便我可以控制样式。 如果单击另一个菜单项，则跨度应消失并放在另一个单击的菜单项周围。

我对此很迷茫，除了下面的代码段外，我不太确定如何处理此问题。 另外，必须用<span>换行的文本可能会有所不同。

请参阅摘要。

 $(function() { $('#om').click(function(e) { $('.hestetekst').load('html/tekst.shtml'); e.preventDefault(); }); $('#resul').click(function(e) { $('.hestetekst').load('html/resul.html'); e.preventDefault(); }); $('#billeder').click(function(e) { $('.hestetekst').load('html/billeder.html'); e.preventDefault(); }); $('#video').click(function(e) { $('.hestetekst').load('html/video.html'); e.preventDefault(); }); $('#afkom').click(function(e) { $('.hestetekst').load('html/afkom.html'); e.preventDefault(); }); $('#presse').click(function(e) { $('.hestetekst').load('html/presse.html'); e.preventDefault(); }); }); $.ajaxSetup({ 'beforeSend': function(xhr) { xhr.overrideMimeType('text/html; charset=ISO-8859-1'); } }); $(document).on('click', '.hesteundertop a', function(e) { $(this).parent().siblings().removeClass('active'); $(this).parent().addClass('active'); }); 

 .active a { background: green; width: auto; color: grey; } .hesteundertop a:link { text-decoration: none; color: #2E181A; display: inline-block; } .hesteundertop a:visited { text-decoration: none; color: #2E181A; display: inline-block; } .hesteundertop a:active { text-decoration: none; color: grey; display: inline-block; } .hesteundertop a:hover { text-decoration: underline; color: grey; display: inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="hesteundertop"> <p><a id="om" href="#">Om Corona</a> &#124; <a id="resul" href="#">Resultater</a> &#124; <a id="billeder" href="#">Billeder</a> &#124; <a id="video" href="#">Video</a> &#124; <a id="afkom" href="#">Afkom</a> &#124; <a id="presse" href="#">Presse</a></p> </div> <div class="hestetekst"> <!--#include virtual="html/tekst.shtml"--><br /> <hr class="hr75" /> </div> 

Answer 1

您可以简单地进行wrap()和unwrap()

  $('.hesteundertop .active a').unwrap(  )
  $(this).wrap("<span class='active'></span>");

上面的代码将单击的链接用span包裹并解开。

我认为这就是您想要的。

 $(function() { $('#om').click(function(e) { $('.hestetekst').load('html/tekst.shtml'); e.preventDefault(); }); $('#resul').click(function(e) { $('.hestetekst').load('html/resul.html'); e.preventDefault(); }); $('#billeder').click(function(e) { $('.hestetekst').load('html/billeder.html'); e.preventDefault(); }); $('#video').click(function(e) { $('.hestetekst').load('html/video.html'); e.preventDefault(); }); $('#afkom').click(function(e) { $('.hestetekst').load('html/afkom.html'); e.preventDefault(); }); $('#presse').click(function(e) { $('.hestetekst').load('html/presse.html'); e.preventDefault(); }); }); $.ajaxSetup({ 'beforeSend': function(xhr) { xhr.overrideMimeType('text/html; charset=ISO-8859-1'); } }); $(document).on('click', '.hesteundertop a', function(e) { $('.hesteundertop .active a').unwrap( ) $(this).wrap("<span class='active'></span>"); }); 

 .active a { background: green; width: auto; color: grey; } .hesteundertop a:link { text-decoration: none; color: #2E181A; display: inline-block; } .hesteundertop a:visited { text-decoration: none; color: #2E181A; display: inline-block; } .hesteundertop a:active { text-decoration: none; color: grey; display: inline-block; } .hesteundertop a:hover { text-decoration: underline; color: grey; display: inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="hesteundertop"> <p><a id="om" href="#">Om Corona</a> &#124; <a id="resul" href="#">Resultater</a> &#124; <a id="billeder" href="#">Billeder</a> &#124; <a id="video" href="#">Video</a> &#124; <a id="afkom" href="#">Afkom</a> &#124; <a id="presse" href="#">Presse</a></p> </div> <div class="hestetekst"> <!--#include virtual="html/tekst.shtml"--><br /> <hr class="hr75" /> </div> 

Answer 2

您可以一次清除所有元素中的active元素，然后将其添加到当前项目中。

$('.hesteundertop a').on('click', function(e) {
  $('.hesteundertop a').removeClass('active');
  $(this).addClass('active');
});

Codepen示例