заменить содержимое div другим содержимым

Я строил список ссылок, все из которых должны изменить содержимое div на другое конкретное содержимое (около 4 строк материала: имя, веб-сайт, контакт и т. д.) по щелчку.

Я нашел этот код:

<script type="text/javascript">
    function ReplaceContentInContainer(id,content) {
        var container = document.getElementById(id);
        container.innerHTML = content;
    }
</script>

и использовал его таким образом:

<li class="pl11">
    <a href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href="http://address.com">superlink</a>')">Pomorskie</a>
</li>

и это не работает, как я ожидал.

Он изменяет текст гиперссылки с "поморские" на "суперлинк".

обычный текст работает просто отлично, но мне нужно связи.

вот http://xn--pytyfundamentowe-jyc.pl/projektanci/kontakty-p/ (только двое из них показывают что-нибудь)

но, попробовав все ваши рекомендации, я думаю, что я бы перескочил на разные divs с # links, потому что ничего не работало с этим :/

большое спасибо за попытку, и ура:)

7
anchor html-lists javascript jquery

3 ответов

так же, как полностью боковым взглядом на это, я бы предложил избежать странности / сложности вложенности и уменьшить проблему.

настройка содержимого в скрытом (т. е. <div id="replacements">...</div>) возьми innerHTML от узла, который вы хотите, и покончить с этим.

гораздо проще получить заменяющий контент от не-разработчиков таким образом, тоже отлично работает, если вы в команде.

// Probably better in a separate helpers.js file.
   function replaceContentInContainer(target, source) {
      document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
   }

контролировать его с: (потерять, что href=javascript: и используйте onClick, лучше как событие обработчик, но для краткости я встрою его в качестве атрибута onClick здесь и использую кнопку.) 

<button onClick="replaceContentInContainer('target', 'replace_target')">Replace it</button>

у нас есть наша цель где-то в документе.

<div id="target">My content will be replaced</div>

тогда содержание замены сидит скрытый внутри замены div.

<div id="replacements" style="display:none">
  <span id="replace_target"><a href="http://address.com">superlink</a></span>
</div>

вот он в JSBin

улучшить динамический характер этого с помощью руль или другая хорошая библиотека шаблонов JS, но это упражнение для OP.

edit: обратите внимание, что вы также должны назвать функции с ведущей строчной буквой и зарезервировать стиль верхнего регистра для имен классов, например var mySweetInstance = new MySpecialObject();

6

цитаты не совпадают! Поэтому, когда вы нажимаете, вы получаете ошибку JavaScript.

браузер видит эту строку:

href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href="http://address.com">superlink</a>')">Pomorskie<

as:

href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href="

Chnage " внутри к @quot;

<li class="pl11">
    <a href="javascript:ReplaceContentInContainer('wojewodztwo', '<a href=@quot;http://address.com@quot;>superlink</a>')">Pomorskie</a>
</li>

пример скрипка.

Отметим также, используя тег href на JavaScript-это плохая практика.

4

у вас проблема с вложенными кавычками. Посмотрите в своем инспекторе DOM, чтобы увидеть, что из него построен HTML-парсер! (in демо, например)

вам либо нужно HTML-escape кавычки внутри атрибута как &quot; или &#34;, или преобразовать их в апострофы и избежать их внутри строки JS с обратными косыми чертами:

<a href="j[…]r('wojewodztwo', '<a href=&quot;http://address.com&quot;>superlink</a>')">…
<a href="j[…]r('wojewodztwo', '<a href=\'http://address.com\'>superlink</a>')">…

посмотреть рабочую демо здесь и здесь.

лучше, вы должны используйте

0