jQuery在单击时环绕文本

Question

I have a little menu from which I load html -files into a div on click. I want menu items to be wrapped in a span (or div) when clicked upon so I can control the style. If another menu item is clicked the span should disappear and be put around the other clicked menu item.

I'm pretty lost on this and I'm not quite sure on how to approach this other than in below snippet. Also the text that has to be wrapped in a <span> could differ.

Please see snippet.

 $(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

You can simply do wrap() and unwrap()

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

Above code will wrap clicked link with span and unwrap it.

I think this is what you are looking for.

 $(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

You can clear active from all elements at once and then add it to current item.

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

Example on Codepen