Я хочу отображать контент из разных ссылок на одной странице - PullRequest
Новая
       1

Я хочу отображать контент из разных ссылок на одной странице

0 голосов
/ 24 февраля 2011

У меня есть два деления. Один слева и один справа.

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

Я пытался сделать это с помощью Iframe и javascript, но я не могу понять, что это правильно. Я все еще новичок, и я искал по всему Интернету вздох .

Есть идеи?!

Спасибо

Ответы [ 6 ]

1 голос
/ 24 февраля 2011

У вас есть пара вариантов для достижения этой цели.

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

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

0 голосов
/ 24 февраля 2011

Привет, Жасмин, ты можешь сделать что-то подобное. Обратите внимание, что это решение без фреймворка javascript. Но вы должны определенно заглянуть в рамки, такие как jquery или прототип. Допустим, у вас есть: 

<html><head>...</head><body>
<ul>
<li><a href="www.google.com" id="firstLink" >GOOGLE</a></li>
<li><a href="www.twitter.com" >Twitter</a></li>
<li><a href="www.tumblr.com" >Tumblr</a></li>
</ul>

<div><iframe name="TEST" src="about:blank" id="ts" ></IFRAME></div>

PUT THE SCRIPT TAG CLOSE TO THE BOTTOM OF YOU PAGE FOR SAKE OF PAGESPEED
BETTER PUT EVERYTHING IN AN EXTERNAL JS SCRIPT

<script laguage='javascript'>

addLoadListener(initEvents);

function initEvents()
{
  var mylink = document.getElementById("firstLink");

  mylink.onclick = changeFrame(mylink.href);

  return true;
}


function changeFrame(url)
       {
          //OPEN URL IN IFRAME WITH ID = ts
          document.getElementByID('ts').src=url;
          return false; // IS NEEDED TO SKIP THE NORMAL BEHAVIOUR OF THE LINK
      }


// THIS FUNCTION IS NEEDED TO HAVE THE JS READY WHEN THE PAGE IS LOADED
function addLoadListener(fn)
{
  if (typeof window.addEventListener != 'undefined')
  {
    window.addEventListener('load', fn, false);
  }
  else if (typeof document.addEventListener != 'undefined')
  {
    document.addEventListener('load', fn, false);
  }
  else if (typeof window.attachEvent != 'undefined')
  {
    window.attachEvent('onload', fn);
  }
  else
  {
    var oldfn = window.onload;
    if (typeof window.onload != 'function')
    {
      window.onload = fn;
    }
    else
    {
      window.onload = function()
      {
        oldfn();
        fn();
      };
    }
  }


   </script>
</body></html>
0 голосов
/ 24 февраля 2011

В onClick вашей ссылки вы можете изменить src iframe на href ссылки, и это должно автоматически изменить содержимое iframe.

0 голосов
/ 24 февраля 2011

Вы можете легко сделать это с помощью библиотеки jQuery и jQuery UI. http://jqueryui.com/demos/tabs/#ajax На вкладках jQueryUI можно загружать удаленный контент.

0 голосов
/ 24 февраля 2011

Если вы хотите отобразить информацию в другом DIV, вам следует использовать AJAX. Если вы хотите использовать навигационную рамку, отметьте this .

0 голосов
/ 24 февраля 2011

Вы можете использовать DOM для достижения чего-то подобного ... взгляните на http://www.w3schools.com/jsref/default.asp там есть несколько хороших примеров ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...