Question

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

我的问题是，我怎样才能以最佳方式执行此操作 - 因为我实际上不想在代码中创建新的代码。

<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

传统上，措辞要素

<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 2

涵盖与HTML有效性相关的主要问题，或者特别是 HTML有效性：

元素不能包含其他块元素，它只能包含＆＃34;短语内容，＆＃34;及其：

如果p元素后面紧跟address，article，aside，blockquote，div，则可以省略
结束标记，dl，fieldset，footer，form，h1，h2，h3，h4，{ {1}}，h5，h6，header，hgroup，hr，main，nav，{{1 }}，ol，p，pre或section，元素......

因此，如果浏览器遇到嵌套table嵌套ul，则会立即将其解释为当前打开的元素的兄弟（无关的终结标记仅作为错误被丢弃）加价）。因为这些嵌套元素的内容在句法上或语义上都不是 - 段，所以我将它们转换为元素，这些元素是“中立的”。容器（它们不含任何内容），可以包含在元素中并包含措辞内容。

属性是非标准的，自定义的，用户创建的属性，因此无效;但是，如果它们之前是前缀，则允许用户定义的属性;为了使您的属性有效，我只是将它们从units转换为data-。

也就是说，这是由此产生的HTML（该部分），请注意我也在段落中移动句子结束时间，以确保句法正确性：

units

现在，您的问题是如何使用按钮显示/隐藏尺寸信息，以显示美国尺寸或欧盟尺寸;使用JavaScript可以更轻松地做到这一点，但是有一个（稍微混乱）黑客可以允许本机HTML和CSS使用data-units和This is the start of the article and this shoe is only available in 11.5 45.元素实现该行为。

<label>元素链接到<input>的{{1}}元素，相关的无线电输入共享相同的名称，因此一次只能选择一个。

这些无线电输入位于<label>元素之前，其中包含您想要切换的大小调整信息，CSS用于选择已检查的无线电输入，然后仅显示特定内容，隐藏另一个。

在实践中，这给出了：

＆＃13;

<input>

＆＃13;

type="radio"

＆＃13;

JS Fiddle demo

参考文献：

HTML规格：
- Paragraph () element。
- Phrasing content。
- Span () element。
CSS：

Answer 3

＆＃13;

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();
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

段落<p>中的HTML标签

3 个答案: