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

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

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

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

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

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

источник

2014-02-15 Simon Jensen

Каков ваш сайт в настоящее время построенный, например. HTML, PHP, .NET? Является ли это CMS, например, Wordpress/Joomla или просто HTML – Seany84

Я пишу в dhtml :) –

Можем ли мы увидеть код/разметку страницы, на которой вы хотите включить эту функцию? – Seany84

Вы можете загрузить этот контент через AJAX. Так, опираясь на CodePen-примере вы дали, вы могли бы сделать что-то вроде этого:

$('#kittens').click(function() { 
    $('div').load('kittens.html'); 
});

Где kittens.html является URL в HTML файл, который вы хотите загрузить.

Update:

Теперь, когда вы разместили ссылку на ваш сайт, я заметил еще несколько вещей:

Вы не получили JQuery включены. Между вами <head></head> меток должно включать <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
Возможно, вы хотите Resultater | Billeder | Video | Afkom ссылки для загрузки другого контента, не так ли? Затем, вы должны использовать что-то вроде этого:

В между <script type="text/javascript"></script>:

$('.hesteundertop a[href="#resul"]').click(function(e) { 
    $('.hestetekst').load('... Resultater URL ...'); 
    e.preventDefault(); 
});

источник

2014-02-15 12:42:38

Значит, URL может быть «content/kittens.html»? Но как я могу разместить это на своей странице? –

Да, вы можете использовать этот URL. Вы можете поместить его в любом месте своей страницы, желательно в 'document.ready (function() {...})' close (чтобы убедиться, что jQuery и DOM доступны). Также убедитесь, что jQuery включен на вашу страницу. И (возможно) у вас больше 1 div, поэтому селектор '$ ('div')' должен быть более конкретным. Наконец, у вас должен быть элемент с идентификатором 'котята' для' '' '' '' '' 'котят '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '. –

Thx для ответов! Я не могу понять, как сказать скрипту работать при нажатии ссылки, например. "Resultater"? –

просмотреть исходный код вашей ссылки, найдите вкладку и демонстрационный HTML внутри.

источник

2014-02-15 12:51:44

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

<!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>

источник

2014-02-15 14:05:10

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

ответ

Смежные вопросы