Я нашел этот скрипт, который я хочу реализовать в своем веб-интерфейсе.
http://codepen.io/johnmotyljr/pen/qhvue
Он делает именно то, что я хочу, чтобы делать, НО! Я не знаю, как положить в мой веб-сайт?! Где поставить JS и как?
Содержимое, которое мне нужно изменить, хранится в html файле, но как мне получить этот контент в мой div с помощью этого скрипта?
Надеюсь, вы поймете, о чем я прошу, и извините за мой ограниченный/плохой английский!
Просмотрите исходный код вашей ссылки, найдите вкладку <iframe>
и демонстрационный html внутри.
Вы можете загрузить этот контент через AJAX. Итак, опираясь на пример CodePen, который вы дали, вы могли бы сделать что-то вроде этого:
$('#kittens').click(function() {
$('div').load('kittens.html');
});
Где kittens.html
- это URL-адрес html файла, который вы хотите загрузить.
Обновить:
Теперь, когда вы разместили ссылку на свой сайт, я замечаю еще несколько вещей:
У вас нет jQuery. Между тегами <head></head>
вы должны включить <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
Возможно, вам нужен Resultater | Billeder | Video | Afkom
Resultater | Billeder | Video | Afkom
Resultater | Billeder | Video | Afkom
ссылки для загрузки различного контента, не так ли? Затем вы должны использовать что-то вроде этого:
Между <script type="text/javascript"></script>
:
$('.hesteundertop a[href="#resul"]').click(function(e) {
$('.hestetekst').load('... Resultater URL ...');
e.preventDefault();
});
document.ready(function(){ ... })
(это обеспечит доступность jQuery и DOM). Также убедитесь, что JQuery включен на вашей странице. И (вероятно) у вас есть более 1 div, поэтому селектор $('div')
должен быть более конкретным. Наконец, у вас должен быть элемент с id kittens
для работы с селектором $('#kittens')
.
попробуйте этот тип метода.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
var kittens = "Kittens";
var puppies = "puppies";
var aardvark = "aardvark";
$('#kittens').click(function(){
$('div').html(kittens);
//$('div').load('kittens.html');
});
})
</script>
<body>
<ul>
<li id="kittens"></li>
<li id="puppies"></li>
<li id="aardvark"></li>
</ul>
<div>Click on the picture for description.</div>
</body>
</html>