根据URL显示切换div [英] Show toggling div based on URL

问题描述

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

I'm trying to have an anchor link, once clicked, show a div. I have a click toggle working on the page, but in addition to that functionality, if a user clicks a sidebar link, I don't want the div to toggle, I just want it to be shown, if hidden. I've tried several if thens, etc - I think this is the closest, but still not working.

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

Functions (first toggles the h4, the second is my attempt to have the same div shown if a URL is loaded...or the anchor link is clicked):

<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>

此外，还尝试使用关键字papers或climate_change_test＃papers：

Also tried this version, with the keyword either "papers" or "climate_change_test#papers" :

<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：

HTML of the h4 and div:

<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

推荐答案

这应该有效：

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

但我建议缩小 $（＃over_left a ）选择器因此它仅适用于那些特定的子菜单链接。

However I would suggest to narrow down the $("#over_left a") selector so it only works on those specific submenu links.

也试过这个版本，关键字是papers或climate_change_test＃papers：

Also tried this version, with the keyword either "papers" or "climate_change_test#papers" :

<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），因此永远不会执行此代码。

The reason why the above code didn't work, is because it is executed on page load. However, when you click an anchor tag url, the page doesn't reload (it only jumps to the relevant anchor div), so this code is never executed.

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

Please also be aware that you don't need a complicated search to look for the "#papers" part in your url. You can simply use:

window.location.hash

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

To find the anchor part at the end of your url.

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

So combining all of the info from above, you can also create a function that deals with the following example: What if someone shares a link with an anchor url? It should automatically expand already then, right?

// 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");
}

这篇关于根据URL显示切换div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！