jquery - JQuery 在点击时环绕文本

Question

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

我对此很迷茫，除了下面的片段之外，我不太确定如何处理这个问题。此外，必须包含在 a 中的文本<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>

标签： jqueryhtml

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>