загружать iframe только при нажатии на ссылку

Один из подходов, который я предлагаю, сначала скрывает все элементы <iframe> с CSS:

iframe {
    display: none;
}

И создав правило CSS, используя class, чтобы показать этот элемент:

iframe.inUse {
    display: block;
}

С помощью jQuery:

// binds a click handler to all 'a' elements with a 'target' attribute:
$('a[target]').click(function(){
    // creates a reference to the clicked-link:
    var clickedEl = this;

    // gets all 'iframe' elements in the document:
    $('iframe')
        // removes the 'inUse' class from all of them:
        .removeClass('inUse')
        // filters the collection of 'iframe' elements:
        .filter(function(){
            // we keep only the 'iframe' whose 'name' attribute
            // is equal to the 'name' attribute of the clicked 'a':
            return this.name === clickedEl.target;
        // and we add the 'inUse' class to that iframe element:
        }).addClass('inUse');
});

Демо-версия JS Fiddle.

Альтернативой является наличие только одного элемента <iframe> на странице, скрыть его с помощью CSS:

iframe {
    display: none;
}

Загрузите содержимое в этот единственный <iframe> со следующим jQuery:

$('a[target]').click(function(e){
    // prevents the default click-behaviour of the link:
    e.preventDefault();

    // finds the 'iframe' element with the name of 'showContent':
    $('iframe[name="showContent"]')
        // sets its 'src' property equal to the 'href' property of the clicked link:
        .prop('src', this.href)
        // shows the 'iframe':
        .show();
});

Демо-версия JS Fiddle.

Запозданное редактирование, использующее простой JavaScript, сделанное по несколько запоздалым объяснениям, что jQuery нельзя использовать:

function contentToIframe () {
    // getting a reference to the 'iframe' element whose 'name' attribute
    // is equal to the clicked element 'target' attribute, using CSS
    // notation available under document.querySelector() (which returns
    // only the first element that matches the selector):
    var iframe = document.querySelector('iframe[name="' + this.target + '"]'),
        // getting a reference to the current 'display' (inline) style of
        // the 'iframe' (found above):
        curDisplay = iframe.style.display;

    // setting the 'src' property of the 'iframe' equal to the 'href'
    // of the clicked link:
    iframe.src = this.href;

    // if the 'iframe' doesn't have a set 'display' style-property, or
    // it is not set to 'block':
    if (!curDisplay || curDisplay !== 'block') {
        // we set it to 'block' to make it visible:
        iframe.style.display = 'block';
    }
}

// getting all the 'a' elements in the document that also have a 'target'
// attribute:
var links = document.querySelectorAll('a[target]');

// iterating over those link elements:
for (var i = 0, len = links.length; i < len; i++) {
    // binding an event-handler to deal with the click event,
    // which executes the function:
    links[i].addEventListener('click', contentToIframe);
}

Демо-версия JS Fiddle.

Окончательная итерация вышеуказанного подхода (по-прежнему простой JavaScript), который теперь также позволяет прокручивать <iframe> при нажатии ссылки для загрузки содержимого:

function contentToIframe() {
    var iframe = document.querySelector('iframe[name="' + this.target + '"]'),
        curDisplay = iframe.style.display,
        // getting a reference to the current position of the 'iframe' element:
        position = iframe.getBoundingClientRect();
    iframe.src = this.href;
    if (!curDisplay || curDisplay !== 'block') {
        iframe.style.display = 'block';
        // if the 'iframe' wasn't visible it position would have been 0,0;
        // so once we've made it visible we re-get its new (now visible)
        // coordinates:
        position = iframe.getBoundingClientRect();
    }

    // force the window to scrollTo the current position (x,y) of the 'iframe':
    window.scrollTo(position.left, position.top);
}

var links = document.querySelectorAll('a[target]');

for (var i = 0, len = links.length; i < len; i++) {
    links[i].addEventListener('click', contentToIframe);
}

Демо-версия JS Fiddle.

Рекомендации:

• "Обычный" JavaScript:
  • document.querySelector().
  • document.querySelectorAll().
  • Element.getBoundingClientRect().
  • EventTarget.addEventListener().
  • Window.scrollTo().
• jQuery (используется до того, как OP решил поделиться своей неспособностью использовать jQuery)
  • addClass().
  • Атрибут-equals ([attribute="value"]).
  • click().
  • filter().
  • Селектор Has-attribute ([attribute]).
  • prop().
  • removeClass().
  • show().

Вы можете попробовать добавить класс. .active к iframe, который вы комбинируете

и добавляет событие onclick в ваше меню.

посмотрите на этот пример.

http://jsfiddle.net/r2mmb/1/