Изменение содержимого в DIV на основе нажатия ссылки

0

Я нашел этот скрипт, который я хочу реализовать в своем веб-интерфейсе.

http://codepen.io/johnmotyljr/pen/qhvue

Он делает именно то, что я хочу, чтобы делать, НО! Я не знаю, как положить в мой веб-сайт?! Где поставить JS и как?

Содержимое, которое мне нужно изменить, хранится в html файле, но как мне получить этот контент в мой div с помощью этого скрипта?

Надеюсь, вы поймете, о чем я прошу, и извините за мой ограниченный/плохой английский!

  • 0
    Что ваш сайт в настоящее время построен, например, HTML, PHP, .NET? Это CMS то есть Wordpress / Joomla или это простой HTML
  • 0
    Я пишу в dhtml :)
Показать ещё 2 комментария
Теги:

3 ответа

0

Просмотрите исходный код вашей ссылки, найдите вкладку <iframe> и демонстрационный html внутри.

Поделиться
0

Вы можете загрузить этот контент через 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();
});
Поделиться
  • 0
    Таким образом, URL может быть «content / kittens.html»? Но как мне поместить это на мою страницу?
  • 0
    Да, вы можете использовать этот URL. Вы можете разместить его в любом месте на своей странице, предпочтительно в закрытии document.ready(function(){ ... }) (это обеспечит доступность jQuery и DOM). Также убедитесь, что JQuery включен на вашей странице. И (вероятно) у вас есть более 1 div, поэтому селектор $('div') должен быть более конкретным. Наконец, у вас должен быть элемент с id kittens для работы с селектором $('#kittens') .
Показать ещё 9 комментариев
0

попробуйте этот тип метода.

<!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>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню