0

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

问题：我有几个 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";
}

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

4

2 回答 2

1

你试过jQuery 选项卡吗？

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

但是，查看您的代码，您为什么不简单地在其中添加一行来隐藏另一个 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();
}
于 2013-10-04T09:25:25.083 回答
0

尝试使用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";
});

不过，我总是建议在纯 JavaScript 上使用jQuery 。如果你以前没有考虑过，你应该考虑一下，因为你会发现大多数事情比你现在做的方式需要更少的脚本

于 2013-10-04T09:24:54.923 回答