Как создать список ссылок, которые открываются в iframe в HTML5, CSS3 и jQuery?

Question

Я хочу создать два вертикальных деления, используя HTML5, CSS3 и JQuery. Один Div содержит URL-адреса, а другой Div содержит контент. Когда я нажал на ссылку на div1, соответствующая страница должна появиться в div2.

Пример активной страницы 1:

   DIV1                        DIV2
 **http://www.yahoo.com**      Yahoo Home Page
   http://www.bing.com
   http://www.google.com

Пример активной страницы 2:

  DIV1                         DIV2
  http://www.yahoo.com         Bing Home Page
**http://www.bing.com**
  http://www.google.com 

Answer 1

Рабочая демонстрация в: http://jsfiddle.net/thejase/XWNVn/

HTML

<div id="toc">
    <ul>
        <li><a href="http://www.yahoo.com">Yahoo</a></li>
        <li><a href="http://www.bing.com">Bing</a></li>
        <li><a href="http://www.google.com">Google</a></li>
    </ul>
</div>
<iframe id="content">

</iframe>

CSS

#toc { width: 33%; float: left; margin-right: 1%; }
#content{ width: 66%; margin-top: 1px; border: none; outline: 1px solid black; }

JavaScript

$(function() {
    var $content = $('#content');
    $('#toc a')
        .click(function() {
            $content.attr('src', $(this).attr('href'));
            return false;
        });
});

Answer 2

Это действительно старая тема, но в случае, если кто-то все еще ищет ответ, более простое решение, взятое из http://www.dreamincode.net/forums/topic/215340-open-href-into-a-div/

, заключается в использовании iframes и добавлении

target="content"

в ссылках («контент» - это идентификатор iframe):

<div id="toc">
    <ul>
        <li><a href="http://www.yahoo.com" target="content">Yahoo</a></li>
        <li><a href="http://www.bing.com" target="content">Bing</a></li>
        <li><a href="http://www.google.com" target="content">Google</a></li>
    </ul>
</div>
<iframe id="content">
</iframe>

Answer 3

вы можете попробовать это:

<div id="container"> 
    <div id="left">
    sample
    </div>
    <div id="right">
    sample
    </div>
</div>

стиль для этого:

#container {
width: 500px;
}
#left {
width: 250px;
float: left;
background-color: #777;
padding: 5px;
}
#right {
width: 250px;
float: right;
background-color: #777;
padding: 5px;
}

это даст вам два вертикальных деления.Если вы хотите добавить отступы, ширина контейнера DIV должна быть соответствующим образом скорректирована.

Answer 4

Как это:

HTML5:

<div class="wrapper">
    <nav>
        <ul>
            <li>Page 1</li>
            <li>Page 2</li>
            <li>Page 3</li>
        </ul>
    </nav>
    <div class="content">Content 1</div>
    <div class="content" style="display: none;">Content 2</div>
    <div class="content" style="display: none;">Content 3</div>
</div>

CSS3:

.wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: box;
}

nav li {
    cursor: pointer;
}

jQuery:

$('nav li').click(function() {
    $('.wrapper .content').hide().eq($(this).index()).show();
});

См. Рабочую демонстрацию наhttp://jsfiddle.net/RNyg8/

Answer 5

Вы можете попробовать что-то вроде следующего (убедитесь, что все ссылки на вашей странице имеют класс .page):

$(function() {
  $('#DIV1').find('a.page').click(function() {
    var html = $(this).html();
    $('#DIV2').html(html);
  });
  return false;
});