段落内的 HTML 标签 <p>

Question

我正在开展一个小型“鞋码”项目，用户应该能够在其中阅读有关特殊鞋的文章。读者可以通过一个按钮选择在文章中获取欧盟或美国尺寸。

我的问题是，我怎样才能以最好的方式做到这一点 - 因为我实际上不想在 <p> 标记内创建新的 <p> 标记..

<p>This is the start of the article and this shoe is only available in <p units="US">11.5</p> <p units="EU">45</p></p>. 

Answer 1

要涵盖与 HTML 的有效性相关的主要问题，或者具体而言，在您的 HTML 的有效性：

1. <p> 元素不能包含另一个块元素，它只能包含“短语内容”及其：

如果p元素后面紧跟address、article、aside、blockquote、blockquote、div、dl、fieldset、footer，则可以省略结束标记,form,h1,h2,h3,h4,h5,h6,header,hgroup,h1,h1,h1,@9876 987654351@，p，pre，section，table，或者ul，元素……

因此，如果浏览器遇到嵌套的<p>，则嵌套的<p> 会立即被解释为当前打开的<p> 元素的同级（无关的结束标记仅作为错误标记被丢弃）。因为这些嵌套元素的内容——在句法或语义上——不是段落，我将它们转换为<span> 元素，它们是“中性”容器（它们不暗示内容），可以包含在 <p> 元素中并包含短语内容。

1. units 属性是非标准的、自定义的、用户创建的属性，因此无效；但是允许用户定义的属性 if 它们以data- 前缀开头；因此，为了使您的属性有效，我只是将它们从 units 转换为 data-units。

也就是说，这是生成的 HTML（该部分的），请注意，为了语法正确，我还移动了段落中的句子结束句点：

<p>This is the start of the article and this shoe is only available in
  <span data-units="US">11.5</span>
  <span data-units="EU">45</span>.</p>

现在，您的问题是如何使用按钮显示/隐藏尺码信息，以显示美国尺码或欧盟尺码；使用 JavaScript 更容易做到这一点，但有一个（有点混乱的）hack 可用于允许原生 HTML 和 CSS 使用 <label> 和 <input> 元素实现该行为。

<label> 元素链接到type="radio" 的<input> 元素，并且相关的无线电输入共享相同的名称，因此一次只能选择一个。

这些单选输入位于 <p> 元素之前，在该元素中保存您想要切换的尺寸信息，CSS 用于选择选中的单选输入，然后仅显示特定内容，隐藏其他。

在实践中，这给出了：

label {
  /* irrelevant, and merely for aesthetics: */
  box-sizing: border-box;
  width: 3em;
  height: 2em;
  background-color: #999;
  color: #fff;
  font-weight: 900;
  border-radius: 0.5em;
  padding: 0.25em;
}
/* the :checked pseudo-class allows us to select
   the selected/'checked' input, and the adjacent
   sibling combinator ('+') traverses from the
   checked input to the adjacent label element: */

input:checked + label {
  background-color: limegreen;
}
/* visually moving the inputs of 'type=radio' (using
   a CSS attribute-selector) off the page, so it's
   not visible to the user; choose any suitably large
   value according to your preference: */

input[type=radio] {
  position: absolute;
  left: -10000px;
}
/* hiding all span elements with a 'data-units'
   attribute: */

span[data-units] {
  display: none;
}
/* if the element with the id of 'us' is checked
   we traverse to the later paragraph siblings
   (using the general-sibling combinator ('~')
   and from those paragraphs we find the descendant
   span elements with a data-unit attribute-value of
   'US' and display them as 'inline-block': */

#us:checked ~ p span[data-units=US] {
  display: inline-block;
}
/* as above, but we use the id of 'eu' to ultimately
   find the spans with the data-attribute of 'EU': */

#eu:checked ~ p span[data-units=EU] {
  display: inline-block;
}
/* this selects the spans with the data-units attribute
   and creates some generated content to show the sizing
   (in case the selected sizing is off-screen, perhaps;
   here we generate the string of ' (US)' or ' (EU)'
   although the US and EU can be replaced by whatever is held
   in the data-units attribute: */

span[data-units]::after {
  content: ' (' attr(data-units)')';
  color: #999;
  font-size: smaller;
}

<!-- the input here precedes the associated label (note the shared
     id of the input and the 'for' of the label) in order to allow
     the label to have a 'selected' state; the inputs also precede
     the paragraph containing the elements to toggle, in order for
     the CSS cascade to work -->
<input id="us" type="radio" name="sizing" checked />
<label for="us">US</label>
<input id="eu" type="radio" name="sizing" />
<label for="eu">EU</label>

<p>This is the start of the article and this shoe is only available in <span data-units="US">11.5</span>  <span data-units="EU">45</span>.</p>

JS Fiddle demo.

参考资料：

• HTML 规范：
  • Paragraph (<p>) element。
  • Phrasing content。
  • Span (<span>) element。
• CSS：
  • Adjacent-sibling (+) combinator。
  • Attribute-selectors。
  • :checked pseudo-class。
  • General-sibling (~) combinator。

Answer 2

通常是短语元素

<span>

用于隔离段落内的内嵌文本。

例如

<p>
This is the start of the article and this shoe is only available in
<span data-units="US">11.5</span>
<span data-units="EU">45</span>
.</p>

Answer 3

var units = $('#changeUnit');
var unitUS = $('#US');
var unitEU = $('#EU');

function changeUnit() {
	if (unitUS.css('display') == 'inline') {
		unitUS.css('display', 'none');
		unitEU.css('display', 'inline');	
		units.text('EU size (click to change)');
	} else {
		unitUS.css('display', 'inline');
		unitEU.css('display', 'none');	
		units.text('US size (click to change)');
	}
}

units.click(function(e) {
    changeUnit();
});

#US {
  display: inline;
  }
#EU {
  display: none;
  }
 #changeUnit {
	cursor: pointer;	 
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="changeUnit">US size (click to change)</p>

<p>This is the start of the article and this shoe is only available in <span id="US" units="US">11.5</span><span id="EU" units="EU">45</span>.</p>