Если имя привязки - КОНТАКТ, откройте этот URL-адрес по щелчку

#javascript #jquery

Вопрос:

у меня есть меню:

 <ul id="main-menu">
    <li><a href="https://myplace.com/products/">Products</a></li>
    <li><a href="https://myplace.com/services/">Services</a></li>
    <li><a href="https://myplace.com/contact/">Contact</a></li>
</ul>

я хотел бы перенаправить контакт с именем привязки на othersite.com

1. просто измените href ? или, если вы хотите открыть его на новой вкладке, добавьте target="_blank" привязку.

2. нет-нет, я не могу изменить этот html, в этом проблема. но я могу добавить javascript

3. Вы можете: (1) изменить href атрибут вашей ссылки, (2) создать страницу контакта и установить перенаправление на другой сайт, (3) создать страницу контакта, содержащую iframe, который загружает содержимое другого сайта, (4) реализовать перенаправление на стороне сервера. Возможно, я забываю некоторые другие варианты. Можете ли вы объяснить, почему, по вашему мнению, это должно быть сделано с помощью JavaScript или jQuery, пожалуйста? Есть ли какие-либо особые требования или ограничения?

Ответ №1:

Как вы упомянули в комментариях, что вам нужно использовать JS для редактирования href и что вы не можете изменить HTML, вы можете сделать это следующим образом:

 var oldhref = "https://myplace.com/contact/"
var newhref = "https://othersite.com/"

$(document).ready(function() {
  $("[href='"   oldhref   "']").prop("href", newhref)
})

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="main-menu">
  <li><a href="https://myplace.com/products/">Products</a></li>
  <li><a href="https://myplace.com/services/">Services</a></li>
  <li><a href="https://myplace.com/contact/">Contact</a></li>
</ul>

Это позволит найти a элемент на его основе href и заменить его без каких-либо изменений в HTML.

Версия, которая выбирается на основе текста ссылки, а не ее href :

 var linkText = "Contact"
var newhref = "https://othersite.com/"

$(document).ready(function() {
  $("a:contains('"   linkText   "')").filter(function(i) {
    return $(this).text() === linkText
  }).prop("href", newhref).attr("target", "_blank")
})

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="main-menu">
  <li><a href="https://myplace.com/products/">Products</a></li>
  <li><a href="https://myplace.com/services/">Services</a></li>
  <li><a href="https://myplace.com/contact/">Contact</a></li>
</ul>

1. но можете ли вы предоставить код: найдите конкретные имена привязок (не URL) и замените их…

2. @Gallex Я обновил ответ версией, которая работает на основе текста ссылки, а не ее href

3. вот и все, спасибо! не могли бы вы добавить в свой код еще одну вещь: открыть эту новую ссылку на новой странице (новая вкладка)?

4. @Gallex я добавил .attr("target", "_blank") , чтобы ссылка открывалась на новой вкладке.

Ответ №2:

Найдите элемент с идентификатором main-menu и добавьте прослушиватель click событий. Кроме того, с помощью Event.preventDefault вы можете остановить действие по умолчанию, которое будет выполняться при щелчке anchor элемента.

 document.getElementById("main-menu").addEventListener("click", (event) => {
  const { target } = event;
  if(target.innerHTML === "Contact") {
    event.preventDefault();
    window.open("https://othersite.com/", '_blank');
  }
})

 <ul id="main-menu">
  <li><a href="https://myplace.com/products/">Products</a></li>
  <li><a href="https://myplace.com/services/">Services</a></li>
  <li><a href="https://myplace.com/contact/">Contact</a></li>
</ul>

Ответ №3:

Я что-то упустил? вы можете заменить ссылку в разделе контактов на othersite.com

 <ul id="main-menu">
<li><a href="https://myplace.com/products/">Products</a></li>
<li><a href="https://myplace.com/services/">Services</a></li>
<li><a href="https://othersite.com/">Contact</a></li>
</ul>