Question

如何在点击左侧菜单时更改正确的div内容，而无需使用简单的javascript代码重新加载页面，而不是jquery选项卡式插件

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>

任何建议都将不胜感激，

感谢

Answer 1

试试这样：

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

Answer 2

您可以使用此代码。它可能对你有所帮助。

<强> 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();
        });

Answer 3

您可以使用名为:target的{{3}}。没有脚本。这是一个the Pseudo class。

使用简单的JavaScript代码更改div内容

3 个答案: