Javascript 根据点击的链接href显示/隐藏元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11211109/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show/hide element based on clicked href of link
提问by kate
I am new to JavaScript and actually quite desperate by now
我是 JavaScript 的新手，现在实际上非常绝望
I have an HTML file that:
我有一个 HTML 文件：
- gets data from an XML file and displays them in various divs (e.g. )
- these divs are hidden (by default) by a class name (class='box')
- when a link is clicked, I pass the 'href' to the function showContent, remove the #, and then look for an element with that ID in the document.
- then I add a new class name ('show') - so that this element shows up!
- 从 XML 文件中获取数据并将它们显示在各种 div 中（例如）
- 这些 div 被类名（class='box'）隐藏（默认情况下）
- 单击链接时，我将“href”传递给函数 showContent，删除 #，然后在文档中查找具有该 ID 的元素。
- 然后我添加一个新的类名（'show'） - 这样这个元素就会出现！
If you run the code you will see that every time you click on a link a new div is displayed...
如果您运行代码，您将看到每次单击链接时都会显示一个新的 div...
So current problems:
所以目前的问题：
- replace already shown divs with the new clicked ID so that only one div shows up every time.
- How can I avoid inserting the onClick event in every single tag - and make this more automated?
- 用新的点击 ID 替换已显示的 div，以便每次只显示一个 div。
- 如何避免在每个标签中插入 onClick 事件 - 并使其更加自动化？
My code is as follows:
我的代码如下：
function showContent(obj)
{
var linkTo = obj.getAttribute("href");
var newlinkTo=linkTo.replace('#','');
//alert (newlinkTo);
document.getElementById(newlinkTo).innerHTML=" This is where the xml variable content should go";
document.getElementById(newlinkTo).className += " Show";
return true;
}
<a href="#b0" onClick="return showContent(this);">
<div id="text_content"> link2 </div>
</a>
<a href="#b1" onClick="return showContent(this);">
<div id="text_content"> link 1 </div>
</a>
<div class='box' id='b0'> abstract content </div>
<div class='box' id='b1'> introduction content </div>
采纳答案by Nathan Wall
This sort of thing is not hard to do without jQuery.
没有jQuery，这种事情并不难做到。
I would recommend using a hash-bang (#!) for Javascript activated links to keep it separate from other possible links with hashes. (script is at the bottom)
我建议对 Javascript 激活的链接使用 hash-bang (#!)，以使其与其他可能的带有散列的链接分开。（脚本在底部）
<div id="nav-links">
<a href="#!b0">
<div id="text_content"> link2 </div>
</a>
<a href="#!b1">
<div id="text_content"> link 1 </div>
</a>
</div>
<div class='box' id='b0'> abstract content </div>
<div class='box' id='b1'> introduction content </div>
<script type="text/javascript">
var links = document.getElementById('nav-links').getElementsByTagName('a');
for(var i = 0, link; link = links[i]; i++) {
link.onclick = showContent;
// Hide content divs by default
getContentDiv(link).style.display = 'none';
}
// Show the first content div
if(links.length > 0) showContent.apply(links[0]);
var current;
function showContent() {
// hide old content
if(current) current.style.display = 'none';
current = getContentDiv(this);
if(!current) return true;
//current.innerHTML = "This is where the xml variable content should go";
current.style.display = 'block';
return true;
}
function getContentDiv(link) {
var linkTo = link.getAttribute('href');
// Make sure the link is meant to go to a div
if(linkTo.substring(0, 2) != '#!') return;
linkTo = linkTo.substring(2);
return document.getElementById(linkTo);
}
</script>?
回答by bokonic
I'm not usually into using jQuery everywhere, but with it you could just do:
我通常不会在任何地方使用 jQuery，但有了它你可以这样做：
<a class='showContent' data='b0'/>
Your js:
你的js：
var selected;
$('a.showContent').on('click',function(e){
var toShow = $(this).attr('data');
if(selected!==undefined) selected.removeClass('Show');
selected = $(div+'#'+toShow);
selected.addClass('Show');
});
Not sure if this is what you want, but thought I'd suggest it.
不确定这是否是你想要的，但我想我会建议它。
回答by Mike Legacy
There is a WAY cleaner way to do this:
有一种更清洁的方法可以做到这一点：
This is just my quick example, it can get EVEN cleaner than this, but this works for your case:
这只是我的简单示例，它可以比这更干净，但这适用于您的情况：
HTML:
HTML：
<a href="#b0" id="b0-link" class="link" rel="b0">link b0</a>
<a href="#b1" id="b1-link" class="link" rel="b1">link b1</a>
<div class='box' id='b0'> abstract content </div>
<div class='box' id='b1'> introduction content </div>?????????
CSS:
CSS：
#b0 { display: none; }
#b1 { display: none; }
a, div.text_content { display: inline; padding: 0 10px; }
JQUERY:
查询：
?$('.link').click(function(){
var id = $(this).attr("rel");
$('#'+id).slideToggle('slow');
});
? Each link would have to have a REL attribute that is the same as the ID of the div element that you are trying to show.
? 每个链接都必须具有与您尝试显示的 div 元素的 ID 相同的 REL 属性。
Here is a JSFiddle to this example in action:
这是此示例的 JSFiddle 实际操作：
