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

-2

как это возможно, чтобы изменить правый Div содержания После клика на лев меню без перезагрузки страницы только с простым яваскриптом кодом, не JQuery вкладок плагинИзменить содержание DIV с простым яваскриптом кодом

http://postimg.org/image/sh7emxdlb/ HTML:

<div class="left"> 
    <ul> 
     <li class="headerline1">Headline1</li> 
     <li class="headerline2">Headline2</li> 
     <li class="headerline3">Headline3</li> 
    </ul> 
</div> 
<div class="header1"> 
    <h3> Headline1 </h3> 
    <br/> 
    <p>Content here...</p> 
</div> 
<div class="header2"> 
    <h3> Headline2 </h3> 
    <br/> 
    <p>Content here...</p> 
</div> 
<div class="header3"> 
    <h3> Headline3 </h3> 
    <br/> 
    <p>Content here...</p> 
</div>

Любое предложение будет оценено,

благодаря

источник

2014-09-09 Adhityo Wardhiman

Ajax-запрос сделает работу – Justinas

Пожалуйста, разместите здесь свой код и объясните проблему, которую у вас более четко – neelsg

jsfiddle.net/kalusingh/Lbwoyw7y, righ content wil show в зависимости от меню слева, например, если кто-то щелкнул заголовок1 слева правый div отображает заголовок 1 и т. д. @neelsg –

Вы можете использовать этот код. Это может быть полезно для вас.

Live Working Demo

HTML код:

<div class="left"> 
    <ul> 
     <li class="headerline1">Headline1</li> 
     <li class="headerline2">Headline2</li> 
     <li class="headerline3">Headline3</li> 
    </ul> 
    </div> 
<div class="header1"> 
    <h3> Headline1 </h3> 
    <br/> 
    <p>Content here...</p> 
</div> 
<div class="header2"> 
    <h3> Headline2 </h3> 
    <br/> 
    <p>Content here...</p> 
</div> 
<div class="header3"> 
    <h3> Headline3 </h3> 
    <br/> 
    <p>Content here...</p> 
</div>

CSS код:

.left 
{ 
    height:500px; 
    width:250px; 
    float:left; 
    position:relative; 
} 
ul li 
{ 
    list-style-type:none; 
} 
.header1, .header2, .header3 
{ 
    display:none; 
    height:500px; 
    width:700px; 


}

Jquery код

$(".headerline1").click(function() { 
     $(".header1").show(); 
     $(".header2").hide(); 
     $(".header3").hide(); 
    }); 
    $(".headerline2").click(function() { 
      $(".header2").show(); 
      $(".header1").hide(); 
      $(".header3").hide(); 
     }); 

    $(".headerline3").click(function() { 
      $(".header3").show(); 
      $(".header1").hide(); 
      $(".header2").hide(); 
     });

источник

2014-09-09 06:48:23 Developer

привет благодарю за скрипку, к сожалению, пока не работает, http://jsfiddle.net/kalusingh/Lbwoyw7y/ @singh –

Попробуйте еще раз обновить код. – Developer

Обновлено до http://jsfiddle.net/kalusingh/9t249esr/, спасибо @singh –

Попробуйте так:

document.getElementByID('rightDiv').innerHTML = "<h1>title</h1><div>content goes here</div>"

источник

2014-09-09 06:28:45

Вы можете просто использовать the Pseudo class имени :target. Нет сценария. И это demo.

источник

2014-09-09 07:24:01

Но есть проблема, что при загрузке страницы во-первых, левое меню является невидимым, и я не нашел способ его решить. –

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

ответ

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