Я пытаюсь открыть одну ссылку в определенном div .

При нажатии на ссылку «Перейти» мне нужно открыть ссылку на div id = "container" и заменить изображение в div на веб-страницу.

Я безуспешно пробовал этот код.

Как это решить?

Вы можете помочь мне?

Заранее спасибо за любую помощь, очень ценю.

<script type="text/javascript" src="js/jquery-1.10.2.js"></script>

<script>
function finish(){
    document.getElementById("loading").style.visibility = "hidden";
}


$(document).ready(function () {

  $('input[readonly]').on('keydown', function (e) {
    if (e.which === 8) {
        e.preventDefault();
    }
  });
});



$(document).ready(function(){
    $('a').on('click',function(){
        var aID = $(this).attr('href');
        var elem = $(''+aID).html();

        $('.target').html(elem);
    });
});

</script>


<ul class="sub_menu">
   <li><a name="#container" href="http://...">Jump</a></li>
</ul>

<div id="container" >
   <img src="images/Logo.jpg" />     
</div>

# EDIT01

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script>

function showPanel() {
            document.getElementById('image').style.display = "none";
}

</script>


<ul class="sub_menu"">
   <li><a name="#container" href="http://..." target="content" onclick="showPanel()">Jump</a></li>
</ul>


<div id="image">
   <img src="images/Logo.jpg" />    
      <iframe name="content" style="border:none;">
      </iframe>      
</div>
0
Antonio Mailtraq 3 Янв 2018 в 13:38

2 ответа

Лучший ответ

Почему бы не использовать iframe?

function showPanel() {
			document.getElementById('image').style.display = "none";
}
<ul class="sub_menu">
   <li><a name="#container" href="www.example.com" target="content" onclick="showPanel()">Jump</a></li>
</ul>

<div id="container" >
<img src="https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067" id="image">
   <iframe name="content" style="border:none;">
   </iframe>
</div>

Ответ на редактирование №1: Ваше редактирование №01 не работает, потому что вы скрываете весь блок с помощью идентификатора "изображение". Измените идентификатор div на другое имя.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script>

function showPanel() {
            document.getElementById('image').style.display = "none";
}

</script>


<ul class="sub_menu">
   <li><a name="#container" href="example.com" target="content" onclick="showPanel()">Jump</a></li>
</ul>


<div id="images">
   <img src="images/Logo.jpg" id="image" />    
      <iframe name="content" style="border:none;">
      </iframe>      
</div>
1
Nikhil Eshvar 3 Янв 2018 в 11:44

Вы можете создать iframe на лету и поместить его в container div.

$('.sub_menu').on('click', 'li > a', function(e) {
  e.preventDefault();
  var url = $(this).attr('href');
   $('#container').html('<iframe class="myiframe" src="'+url+'" />');
})
.myiframe{border: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sub_menu">
   <li><a name="#container" href="/questions">Jump</a></li>
</ul>

<div id="container" >
   <img src="images/Logo.jpg" />     
</div>
0
Tareq 3 Янв 2018 в 10:56