Question

我一直在寻找一个好几个小时的答案所以我不得不求助于来到这里并寻求一些帮助。

问题：我有一些href标签可以打开地图或列表，具体取决于你点击的标签，我的问题是，我需要将地图默认设置为打开，当你点击列表时选项卡，关闭和打开列表的地图（所以基本上当你点击一个，另一个关闭，反之亦然）。

这是我的代码

HTML：

 <div class="clearfix"></div>
<a class="sortby">
    SORT BY
</a>
<a class="sortby_town" href="javascript:showDiv()">
    MAP
</a>
<a class="sortby_category" href="javascript:showListings()">
    LISTINGS
</a>

<div id="townmap" style="display: none; margin-top: 60px;">
{loadposition sawbridgeworth}
</div>

<div id="townlistings" style="display: none; margin-top: 60px;">
{component url='index.php?Itemid=132&option=com_mtree&task=search&searchword=Sawbridgeworth&cat_id=0'}
</div>

JavaScript的：

function showDiv() {
document.getElementById('townmap').style.display = "block";
}

function showListings() {
document.getElementById('townlistings').style.display = "block";
}

任何帮助将不胜感激！提前谢谢！

Answer 1

您是否尝试过jQuery Tabs？

这是一个很好的插件，可以为您提供您尝试创建的功能。

然而，看看你的代码为什么不在那里简单地用一条线来隐藏另一个div？

function showDiv() {
    document.getElementById('townmap').style.display = "block";
    document.getElementById('townlistings').style.display = "none";
}

function showListings() {
    document.getElementById('townlistings').style.display = "block";
    document.getElementById('townmap').style.display = "none";
}

Diplay="none"会隐藏div。或者，如果您使用的是jQuery（如标记所示），您可以尝试以下方法：

function showDiv() {
    $('#townmap').show();
    $('#townlistings').hide();
}

function showListings() {
    $('#townlistings').show();
    $('#townmap').hide();
}

Answer 2

尝试使用 element.style.display =“none”

function showDiv() {
document.getElementById('townmap').style.display = "block";
document.getElementById('townlistings').style.display = "none";
}

function showListings() {
document.getElementById('townlistings').style.display = "block";
document.getElementById('townmap').style.display = "none";
}

要在页面加载时显示地图，您可以将一个功能附加到文档，该功能将在页面加载后执行

document.attachEvent("onreadystatechange", function(){
    this.getElementById('townmap').style.display = "block";
});

我总是建议使用jQuery而不是纯JavaScript。如果你以前没有，你应该考虑它，因为你会发现大多数事情将比你现在这样做的脚本少得多

JavaScript，打开另一个时关闭标签页

2 个答案: