Question

我试图拥有一个锚点链接，一旦点击，就会显示一个div。我在页面上进行了单击切换，但除了该功能之外，如果用户点击侧边栏链接，我也不希望div切换，我只是希望它显示，如果隐藏的话。我已经尝试了几个如果有人等等 - 我认为这是最接近的，但仍然无法正常工作。

函数（首先切换h4，第二个是我尝试在加载URL时显示相同的div ...或者单击锚链接）：

<script>
$(document).ready(function(){

//Hide (Collapse) the toggle containers on load
$(".toggle_container3").hide();

//Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
$(".trigger3").click(function(){
    $(this).toggleClass("active").next().slideToggle("slow");
    return false; //Prevent the browser jump to the link anchor
}).first().click()

});
</script>

<script>
$(function() {
if ( document.location.href.indexOf('#papers') > -1 ) {
    $("#papertoggle").show();
    $("h4#papers").addClass("active");
})
});

</script>

还试用了这个版本，关键字是＆＃34;论文＆＃34;或＆＃34; climate_change_test＃papers＆＃34; ：

<script type="text/javascript">
// Get URL
var url = window.location.href;
// Get DIV
var msg = document.getElementById('papertoggle');
// Check if URL contains the keyword
if( url.search( 'climate_change_test#papers' ) > 0 ) {
  // Display the message
  msg.style.display = "block";
}
</script>

链接的HTML：

 <li><a href="#papers" title="Research | Climate Change | Papers and Publications">Papers and Publications</a></li>

h4和div的HTML：

<h4 class="trigger3 dark_grey" id="papers">
<a href="#">Papers and Publications</a></h4>
<div class="toggle_container3" id="papertoggle"> content </div>

整个测试页： http://www.sea.edu/sea_research/climate_change_test

Answer 1

这应该有效：

$("#over_left a").click(function(){
    var id = $(this).attr("href");
    $(id).toggleClass("active").next().slideToggle("slow");
});

但是，我建议缩小$("#over_left a")选择器的范围，使其仅适用于这些特定的子菜单链接。

还试用了这个版本，关键字是＆＃34;论文＆＃34;或＆＃34; climate_change_test＃papers＆＃34; ：

<script type="text/javascript">
// Get URL
var url = window.location.href;
// Get DIV
var msg = document.getElementById('papertoggle');
// Check if URL contains the keyword
if( url.search( 'climate_change_test#papers' ) > 0 ) {
  // Display the message
  msg.style.display = "block";
}
</script>

上述代码无法正常工作的原因是因为它是在页面加载时执行的。但是，当您单击锚标记URL时，页面不会重新加载（它只会跳转到相关的锚点div），因此永远不会执行此代码。

另请注意，您不需要复杂的搜索来查找＆＃34; #papers＆＃34;在你的网址中。你可以简单地使用：

window.location.hash

在网址末尾找到锚点部分。

因此，结合上面的所有信息，您还可以创建一个处理以下示例的函数：如果有人与锚点网址共享链接怎么办？它应该已经自动扩展了，对吗？

// On page load

var anchor = window.location.hash;
// If there is an anchor in the URL, expand the relevant div
if (anchor) {
    $(anchor).toggleClass("active").next().slideToggle("slow");
}

根据网址

1 个答案: