锚元素上的空 href 属性在 HTML 中有效，但在 Twig 中无效
Posted
技术标签:
【中文标题】锚元素上的空 href 属性在 HTML 中有效，但在 Twig 中无效【英文标题】：Empty href attribute on anchor element works in HTML but not in Twig 【发布时间】：2016-03-10 21:19:38 【问题描述】：我正在使用引导程序对选项卡和内容进行一些折叠和切换。我将在底部链接整个代码。现在，目前我正在处理的页面是一个静态树枝页面。我在获取一些链接以在 twig 中工作时遇到问题，所以我将代码拉到一个普通的 html 页面，看看会发生什么。基本上，我有一个<a href="">Hide</a>，它基本上折叠/隐藏了活动的选项卡式内容。现在，问题是，在 twig（使用 symfony 2）中，如果我这样做，它会转到主路由。如果我这样做 href="/pagename" 它只是重新加载同一页面，我不希望它这样做。如何让纯 html 中的工作内容在我的 twig 文件中工作？
p.s.：最好将代码复制粘贴到代码编辑器中，因为 jsfiddle 和 codepen 由于某种原因无法正常工作。
p.s.2：我想要完成的是在页面加载时拥有 4 个链接，然后单击其中一个以显示新的内容/div 元素。如果我单击其他 3 个链接之一，则可见的 div 会相应更改（引导程序的动态选项卡）。 4 个 div/标签中的每一个都有一个隐藏链接，单击该链接需要关闭折叠的标签/div。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Testing</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-3 text-center"><a data-toggle="tab" href="#one">One</a></div>
<div class="col-xs-3 text-center"><a data-toggle="tab" href="#two">Two</a></div>
<div class="col-xs-3 text-center"><a data-toggle="tab" href="#three">Three</a></div>
<div class="col-xs-3 text-center"><a data-toggle="tab" href="#four">Four</a></div>
</div>
<div class="row">
<div class="tab-content">
<div id="one" class="tab-pane">
<h3>Content One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text-right"><a href="">Hide</a></p>
</div>
<div id="two" class="tab-pane">
<h3>Content Two</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text-right"><a href="">Hide</a></p>
</div>
<div id="three" class="tab-pane">
<h3>Content Three</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text-right"><a href="">Hide</a></p>
</div>
<div id="four" class="tab-pane">
<h3>Content Four</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text-right"><a href="">Hide</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
【问题讨论】：
另外，我知道我可以使用 toggleClass 来删除显示/隐藏选项卡式内容的活动类，但我试图将其用作最后的手段。 【参考方案1】：将您的 href="" 更改为 href="#" 看看是否适合您。 ;-)
【讨论】：
请在您的回答中附上一些解释。 Johnny - 不会关闭选项卡，因为它会尝试转到一个 id 不存在的元素。以上是关于锚元素上的空 href 属性在 HTML 中有效，但在 Twig 中无效的主要内容，如果未能解决你的问题，请参考以下文章