1
感谢您花时间检阅我的问题！ :-)我试图用自定义的HTML元素来编写更好，更干净，更易维护的HTML，而不是传统的'div'方法。我有一个非常简单的例子，它使用一个div和一个类来映射我的链接到div，我想要显示/隐藏，这确实有效。我有这样的一种功能性的工作示例我试图产生：如何切换查看/显示自定义HTML元素？
<html>
<head>
<style>
<!-- Not sure if display or visibility is the way to go so will look -->
<!-- that later, for now just setting both as that works -->
<!-- For some reason doing this does not seem to work -->
.hidden {
display: none;
visibility: hidden;
}
.unhidden {
display: block;
visibility: visible;
}
<!-- but, doing this does, anyone any idea why? -->
.hidden { display: none; }
.hidden { visibility: hidden; }
.unhidden { display: block; }
.unhidden { visibility: visible; }
</style>
<script type="text/javascript">
function toggle_view_div(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
</head>
<body>
<p>
This test shows or hides a div referenced by its class
</p>
<a href="javascript:toggle_view_div('testToggleDivID');">Do the test</a>
<div id="testToggleDivID" class="hidden">
<h3>Testing Toggling HTML</h3>
</div>
</body>
</html>
不过，我想提供这种具有多个链接到多组功能/文本的子集，我曾尝试下面，但我显然做一些愚蠢的，因为我无法得到它的工作：
<html>
<head>
<script type="text/javascript">
function toggle_view_node(nodeID) {
nodeID.getAttribute('visibility')=('hidden')?item.setAttribute('visibility','visible'):item.setAttribute('visibility','hidden');
nodeID.getAttribute('display')=('none')?item.setAttribute('display','block'):item.setAttribute('display','none');
}
</script>
</head>
<body>
<p>
This test shows or hides Topic 1 custom element, (or at least attempts to
</p>
<a href="javascript:toggle_view_node('Topic1');">Topic 1</a>
<p>
This test shows or hides Topic 2 custom element, (or at least attempts to
</p>
<a href="javascript:toggle_view_node('Topic2');">Topic 2</a>
<p>
<p>
This test shows or hides the Intro custom element, (or at least attempts to
</p>
<a href="javascript:toggle_view_node('Intro');">Introduction</a>
<p>
This test shows or hides the Detail custom element, (or at least attempts to
</p>
<a href="javascript:toggle_view_node('Detail');">Detail</a>
<p>
<Intro>Some introduction text giving a more detailed overview that may want to be hidden by default, but able to be toggled into view with an always visible link such as at the top or on the side of the page</Intro>
<Detail>I may want to add detail with this ability both like this at the root of the document, but potentially inline with other text in custom elements as shown below</Detail>
</p>
<Topic1>
<h1>Topic 1</h1>
<p>
Some topics to be just simple nodes of text.
</p>
</Topic1>
<Topic2>
<h1>Topic 2</h1>
<p>
Other topics to be more detailed topics, <Topic1>potentially including aspects of that can share the toggle feature for the root level topic 1, as per all topic 1 nodes</Topic1> though generally referencing only topic 2 content. <Detail>However it would be nice to be able to toggle not directly relevant, but nice to have detail as well</Detail>
</p>
</Topic2>
<Topic3>
<h1>Topic 3</h1>
<p>
<Intro>Some topics might want an intro<Detail>, that may want further detail contained in them</Detail> that would also provide sufficient intro in itself.</Intro>
So, is this possible? I don't want specific control of sub custom elements, and can do it with div's and assigned classes if I really have to, but surly it is possible with a bit of special JS or CSS to do what I am looking for?</p>
</Topic3>
</body>
</html>
请，有人可以帮我找出我在做什么错。我真的想用简单的CSS或JS来生成上述的功能，尽可能动态。理想情况下，我不需要指定特定的（特别是每个主题或HTML标签的重复代码，我希望能够通过按钮/链接显示/隐藏）。显然，我可能必须设置一些默认分配，默认情况下，但如果我可以避免每个“上下文”需要额外的重复代码我想翻转，这将是惊人的！
任何指针，可以帮助我实现我所尝试的，而无需使用jQuery或超过JS和CSS的冗长的图书馆将真正让我的一天！
非常感谢提前和道歉，如果我做的事情真的很愚蠢，我没有做过这么多的自定义元素的工作，所以可能是。
周亲切的问候，
詹姆斯
**最新尝试**
<html>
<head>
<style>
<!-- Not sure if display or visibility is the way to go so will look -->
<!-- that later, for now just setting both as that works -->
<!-- For some reason doing this does not seem to work -->
.hidden {
display: none;
visibility: hidden;
}
.unhidden {
display: block;
visibility: visible;
}
<!-- but, doing this does, anyone any idea why? -->
.hidden { display: none; }
.hidden { visibility: hidden; }
.unhidden { display: inline; }
.unhidden { visibility: visible; }
<!-- Playing with something like this, ideally I would -->
<!-- configure the show/hide state of my custom HTML tags -->
<!-- universally in a similar way? -->
Topic1.hide { display: none; }
Topic2.hide { display: none; }
Topic3.hide { display: none; }
Intro.hide { display: none; }
Detail.hide { display: none; }
<!-- Another attempt to configure switch state but does not work either -->
Topic1 { className: unhidden; }
Topic2 { className: unhidden; }
Topic3 { className: unhidden; }
Intro { className: unhidden; }
Detail { className: unhidden; }
</style>
<script type="text/javascript">
// This works, but is not clean
function toggle_view_div(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
// I am now attempting to use this on 'Topic1' as per the suggestion
// in the comments of this post, for some reason it does not work, wondering if
// I need to do a .forEach to parse the set of nodeID's of the 'Topic1' in this
// example, but if working whatever HTML tag name that I want to toggle in or
// out of view
function toggle_view_node_id(nodeID) {
var item = document.getElementById(nodeID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
// This does not work but I have left to show what I tried that did not work
function toggle_view_node(nodeID) {
if (nodeID) {
nodeID.getAttribute('visibility')=('hidden')?item.setAttribute('visibility','visible'):item.setAttribute('visibility','hidden');
nodeID.getAttribute('display')=('none')?item.setAttribute('display','block'):item.setAttribute('display','none');
}
}
</script>
</head>
<body>
<p>
This test shows or hides a div referenced by its class
</p>
<a href="javascript:toggle_view_div('testToggleDivID');">Do the test that works using extra layer of div with mapped class</a>
<p>
This test shows or hides Topic 1 custom element,
(or at least attempts using the suggestion in this post
comments to try to make work without inline JS and call a
function to do it as with my working example, unfortunatly
however, this still does not seem to work :(
</p>
<a href="javascript:toggle_view_node_id('Topic1');">Topic 1</a>
<p>
This test shows or hides Topic 2 custom element,
(or at least attempts to using existing method that doesn't work
</p>
<a href="javascript:toggle_view_node('Topic2');">Topic 2</a>
<p>When I have it working I hope to be able to have: </p><a href="javascript:toggle_view_node('Topic3');">Topic 3</a>
<p>And... </p><a href="javascript:toggle_view_node('Intro');">Intro</a>
<p>And this... </p><a href="javascript:toggle_view_node('Detail');">Detail</a>
<div id="testToggleDivID" class="hidden">
<h3>Testing Toggling HTML into view using a div and associated class of hidden, can I not do this on a custom element?</h3>
</div>
<p>
<Intro>Some introduction text giving a more detailed overview that may want to be hidden by default, but able to be toggled into view with an always visible link such as at the top or on the side of the page</Intro>
<Detail>I may want to add detail with this ability both like this at the root of the document, but potentially inline with other text in custom elements as shown below</Detail>
</p>
<Topic1>
<h1>Topic 1</h1>
<p>
Some topics to be just simple nodes of text.
</p>
</Topic1>
<Topic2>
<h1>Topic 2</h1>
<p>
Other topics to be more detailed topics, <Topic1>potentially including aspects of that can share the toggle feature for the root level topic 1, as per all topic 1 nodes</Topic1> generally referencing only topic 2 content. <Detail>However it would be nice to be able to toggle not directly relevant, but nice to have detail as well</Detail>
</p>
</Topic2>
<Topic3>
<h1>Topic 3</h1>
<p>
<Intro>Some topics might want an intro<Detail>, that may want further detail contained in them</Detail> that would also provide sufficient intro without.</Intro>
So, is this possible? I don't want specific control of sub custom elements, and can do it with div's and assigned classes if I really have to, but surly it is possible with a bit of special JS or CSS to do what I am looking for?</p>
</Topic3>
</body>
</html>
在HTML5中有可以使用的'section's和'main'，以及可以在这些元素中使用的'header'。如果你想要更好的代码，也许也要看看这个。 – Albzi
对于许多经常性的js函数来说，只使用一个函数只能使用特定的参数而不是内联js。 –
在你的第二个代码片段中，你试图对一个字符串（nodeID）的'getAttribute'。您没有通过nodeID获取实际的DOM元素，就像您在第一个代码段中所做的那样 – Meldon