Question

我在这里遇到问题，似乎无法想到解决方案是什么。如果可能的话，我需要避免使用PHP和JAVA，因为我还没有编写代码。

基本上我有18个产品/链接和一个div在Div内一次显示一页。每个链接都应调用站点文件夹中的HTML页面，但仅在选择链接时显示。

非常感谢有关此主题的帮助。有人帮助我使用js，但由于一些奇怪的原因它不适合我：参见代码：

<script type="text/javascript" src="js/tabcontent.js"></script>
________________________________________________________________


<div id="textBox_prodLine">
        <p style="line-height: 26px;">
        <b>
        <a class="prodList" href="#" rel="tcontent1">+ Soft Touch | Lotionized Hand Soap</a><br>
        <a class="prodList" href="#" rel="tcontent2">+ Pure Touch | Anti-Bacterial Hand Soap</a><br>
        <a class="prodList" href="#" rel="tcontent3">+ Soft Foam | Foaming Hand Soap</a><br>
        <a class="prodList" href="#" rel="tcontent4">+ Sanatouch | Hand Sanitizer</a><br>
        <a class="prodList" href="#" rel="tcontent5">+ Suds Up | Pot & Pan Dish Soap</a><br>
        <a class="prodList" href="#" rel="tcontent6">+ Neutra | Neutral Cleaner</a><br>
        <a class="prodList" href="#" rel="tcontent7">+ Neutra | Lemon Scented Neutral Cleaner</a><br>
        <a class="prodList" href="#" rel="tcontent8">+ Windshine | Glass Cleaner</a><br>
        <a class="prodList" href="#" rel="tcontent9">+ HDX-99 | Heavy Duty Degreaser</a><br>
        <a class="prodList" href="#" rel="tcontent10">+ Rug Rescue | Carpet Spot Remover</a><br>
        <a class="prodList" href="#" rel="tcontent11">+ Biospray | RTU Cleaner/Disinfectant</a><br>
        <a class="prodList" href="#" rel="tcontent12">+ Big Blue | Low Temp Rinse Aid</a><br>
        <a class="prodList" href="#" rel="tcontent13">+ Big Blue | High Temp Rinse Aid</a><br>
        <a class="prodList" href="#" rel="tcontent14">+ Big Red | Heavy Duty Dish Detergent</a><br>
        <a class="prodList" href="#" rel="tcontent15">+ Big Yellow | Chlorine & Destainer</a><br>
        <a class="prodList" href="#" rel="tcontent16">+ Sparkle | Toilet Bowl Cleaner</a><br>
        <a class="prodList" href="#" rel="tcontent17">+ Sunbryte | Cream Cleanser</a><br>
        <a class="prodList" href="#" rel="tcontent18">+ Lemonshine | High Foaming Pot & Pan Detergent</a><br>
       </b>
    <br>
    </p>
    </div>

    <div id="prodWrapper">
    <div id="tcontent1" class="tabcontent">
    <object data="softtouch.htm"></object>
    THIS SHOULD BE AN HTM FILE FROM INSIDE THE SITE WHEN LINK SELECTED ABOVE<br />
    </div>

    <div id="tcontent2" class="tabcontent">
    THIS SHOULD BE THE SECOND HTM FILE FROM INSIDE THE SITE WHEN LINK SELECTED ABOVE<br />
    </div>

    <div id="tcontent3" class="tabcontent">
    THIS SHOULD BE THE THIRD HTM FILE FROM INSIDE THE SITE WHEN LINK SELECTED ABOVE<br />
    </div>

    <div id="tcontent4" class="tabcontent">
    THIS SHOULD BE THE FOURTH HTM FILE FROM INSIDE THE SITE WHEN LINK SELECTED ABOVE<br />
    </div>
    </div>

________________________________________________________________

<script type="text/javascript">

var myflowers=new ddtabcontent("prodWrapper")
myflowers.setpersist(true)
myflowers.setselectedClassTarget("link") //"link" or "linkparent"
myflowers.init()

</script>

<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)

</script>

________________________________________________________________

CSS:

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

Answer 1

一种选择是使用HTML（<div><iframe id="frame1" height="100%" width="100%" src="page-one.html"></iframe></div>）在if中放置iframe。

然后你可以创建一个JavaScript函数来改变内容：

function changeContent(url) {
    document.getElementById("frame1").src = url;
}

然后您可以使用HTML更改它：<button onClick="changeContent('page-two.html')">Page 2</button>。

刚看到您的代码，使用<a>标记，您仍然可以使用onClick属性并将href属性设置为＃（<a href="#" onClick="changeContent('page-two.html')">Page 2</a>）来实现此目的。

使用链接列表将多个HTML页面插入指定的DIV

1 个答案: