Question

我有一个小菜单，点击该菜单即可将html文件加载到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>");

上面的代码将用跨度包装单击的链接并将其解包。

我认为这就是您想要的。

$(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');
});

Example on Codepen

jQuery在点击时环绕文本

2 个答案: