Question

我一直在寻找解决方案，但我找不到任何适合我的方法。我有一个页眉和内容div。内容div不可见。点击nav menu中的项目后，我想隐藏标题，并显示所选文章。我实现了它，但是当我试图通过url＃name获取文章时没有任何反应。

“jsfiddle”在这种情况下不会有用，但我会粘贴它来显示我的代码。有不同的方法吗？也许以某种方式隐藏文章与代码，然后只是改变不透明度，也许使用jquery的“addclass”？我真的不知道，我混合和卡住了。

感谢您的帮助。

Answer 1

您可以根据链接应用非常简单的JS条件来显示和隐藏您的文章，我已经更新了您的JSfiddle。

$(function () {

    //GET HASH FROM URL, CHECK IF ELEMENT EXISTS AND THEN SHOW IT
    $(document).ready(function(){
    	var hash = window.location.hash;
      if(hash.length){
      	$(hash).show();
      }
    })
    
    $(".article-nav a").on("click", function () {       
        
        $(".main-article").hide();
        
        console.log($(this).attr("id"));
         
        $('#article-' + $(this).attr("id")).show();
     });
});

article {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <nav>
    <ul class="article-nav">
      <li><a id="1" href="#article-1">Article 01</a></li>
      <li><a id="2" href="#article-2">Article 02</a></li>
    </ul>
  </nav>
</header>
<div id="content">
  <article id="article-1" class="main-article">Article 01 Lorem ipsum</article>
  <article id="article-2" class="main-article">Article 02 Lorem ipsum</article>
</div>
<footer></footer>

建议：请注意用户可以根据需要更改哈希，向选择器注入任何内容，在使用之前应检查哈希值。

Answer 2

您也可以在完整的css中执行此操作： https://jsfiddle.net/edby86ta/11/

在这种情况下，最难的部分是再次隐藏它。你必须有一个“关闭”按钮指向另一个（可能是不存在的）锚点：

<a href="#clear">Close</a>

为什么我不能通过把url和hashname放到隐藏的文章中？

2 个答案: