Использование jQuery для отображения содержимого ссылки в указанном div - PullRequest
Новая
       82

Использование jQuery для отображения содержимого ссылки в указанном div

0 голосов
/ 06 августа 2020

Мне сложно понять, как сделать так, чтобы содержимое ссылки отображалось в элементе div 'mobileContent' с помощью jQuery. Кажется, я не могу найти решение, которое точно подходит. Вот html, заранее спасибо: 

  <body>
    <div class="containerDiv">
      <div class="mainDiv1Mobile">
        <div class="headerContainer">
          <div class="headerDesc">
            <a href="#">Email</a>,&nbsp;
            <a href="#>Instagram</a>
          </div>
          <div class="headerNav">
            ⇩ <a href="projectLinks.html" class="nav">Projects</a>
            ⇨ <a href="moreInfo.html" class="nav">More Info</a>
          </div>
        </div>

        <div class="mobileContent"></div>

      </div>
    </div>
  </body>

Ответы [ 3 ]

1 голос
/ 06 августа 2020

Вызвать это при щелчке по элементу 

$.ajax({
        url: 'http://www.websitetogetcontentfrom.com/',
        type: 'GET',
        data: {},
        success: function (data) { 
    
            $("#mobileContent").html(data);
    
        }
    });

Нормальные html страницы по http: // загружаются с этим при вызове с другой страницы на http://. Однако вы не сможете загрузка с localhost, и есть много ограничений на такую ​​операцию, и я сомневаюсь, что сайты, такие как instagram, позволяют вам это.

1 голос
/ 06 августа 2020

Вы можете выбрать .mobileContent и использовать функцию html для вставки тега a. 

$('.mobileContent').html(
  $('<a></a>').attr('href', 'https://www.google.com').text('Link to Google')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="containerDiv">
  <div class="mainDiv1Mobile">
    <div class="headerContainer">
      <div class="headerDesc">
        <a href="#">Email</a>,&nbsp;
        <a href="#">Instagram</a>
      </div>
      <div class="headerNav">
        ⇩ <a href="projectLinks.html" class="nav">Projects</a> ⇨ <a href="moreInfo.html" class="nav">More Info</a>
      </div>
    </div>
    <div class="mobileContent"></div>
  </div>
</div>

NB У вас есть орфографическая ошибка (отсутствует " в Instagram a).

0 голосов
/ 06 августа 2020

Хорошо, я не уверен, какой контент ссылки вы хотите отображать, но я сделаю все возможное, чтобы помочь каким-то образом:)

Пожалуйста, не стреляйте, если я неправильно понимаю вопрос LOL.

Но если предположить, что вы хотите отобразить дополнительную информацию внутри div mobileContent, щелкнув что-нибудь в панели навигации, вы можете сделать что-то вроде этого.

js

$(document).ready(function(){
  $(".nav").click(function(){
    $("#mobileContent").show();
  });
});

html

<body>
<div class="containerDiv">
    <div class="mainDiv1Mobile">
    <div class="headerContainer">
        <div class="headerDesc">
        <a href="#">Email</a>,&nbsp;
        <a href="#>Instagram</a>
        </div>
        <div class="headerNav">
        ⇩ <a href="projectLinks.html" class="nav">Projects</a>
        ⇨ <a href="moreInfo.html" class="nav">More Info</a>
        </div>
    </div>

    <div class="mobileContent" style="display: none;"></div>
        <a href="moreInfo.html" class="nav">More Info</a>
    </div>
</div>
</body>

Надеюсь, что это поможет или поможет вам добраться туда, куда вам нужно go.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...