javascript - 如何在 html 文件中创建交互式标签？

Question

我对编程一无所知，所以我想知道从哪里开始学习 + 我的问题有多难。由于我没有任何编程知识，我会尝试用自然语言描述我的问题，希望没问题。

1. 我有刑法典(一种法律)的 html 文件。它包含许多不同的规则，这些规则在编号的段落中(§ 1、§ 4 等)。

2. 现在我想查看源代码并根据特定标准手动“标记”段落。例如，所有涉及使用武器的段落都带有“武器”标签，或者最低刑期为 1 年及以上的段落带有“犯罪”标签等。

3. 最后，我想在 Firefox/Chrome 中查看一个交互式 html 文件，例如，我可以在其中单击“犯罪”按钮，所有带有“犯罪”标签的 §§§ 都会出现在大胆的红色，保持文件的其余部分完好无损。理想情况下，我还可以点击“武器”，然后只会看到标有“武器”的 §§§，从而使文档的其余部分消失。

该功能仅适用于我，因此它只需要在带有 Firefox 或 Chrome 的 Xubuntu 11.04 桌面上运行。原始源文件为 http://bundesrecht.juris.de/stgb/BJNR001270871.html .代码对我来说看起来很奇怪，有没有办法将它转换成更容易手动编辑的东西？

如有任何帮助，我们将不胜感激。主要是不知道从哪里开始学习。我需要了解 HTML、jQuery 或 Python 等编程语言吗？我需要在我的 PC 上设置 Apache 服务器吗？也许是因为我对编程的无知，这似乎是一个不太复杂的功能。我是否错误地认为一个业余爱好者可能一个月就能构建出像 thin 这样的东西？

Answer 1

我认为这不是很难制作，尽管标记过程可能非常耗费人力。

您不需要太多的编程技能，尤其是当您想要手动标记内容时。您可能只需要基本的 HTML 和 CSS 以及一些 Javascript 即可完成此操作。

我会做的是以下内容

1. 创建 HTML 文件的本地副本(在浏览器中使用“另存为”)
2. 通过给每个 § 适当的标签作为类名来手动标记它
3. 创建所有可用标签的列表，让 javascript 过滤掉您想要查看的 §

我想现在第 1 步 非常简单，所以我将直接进入第 2 步。 HTML 文件中的段落根据特定模式进行格式化，例如:

<div class="jnnorm" id="BJNR001270871BJNE009802307" title="Einzelnorm">
    <div class="jnheader">
        <a name="BJNR001270871BJNE009802307"/><a href="index.html#BJNR001270871BJNE009802307">Nichtamtliches Inhaltsverzeichnis</a>
        <h3><span class="jnenbez">&#167; 31</span>&#160;<span class="jnentitel">R&#252;cktritt vom Versuch der Beteiligung</span></h3>
    </div> 
    <div class="jnhtml">
        <div>
            <div class="jurAbsatz">
            (1) Nach &#167; 30 wird nicht bestraft, wer freiwillig etc.
            </div>
        </div>
    </div>
</div>

您现在要做的是将您的标签添加到 <div>类元素 jnnorm .所以上面的例子会变成(如果标签 weapon 是合适的):

<div class="jnnorm weapon" id="BJNR001270871BJNE009802307" title="Einzelnorm">

您对 HTML 中的每个段落都这样做。这会很无聊，但没关系。

现在是第 3 步。首先创建您刚刚创建的所有标签的链接列表。你如何创造lists in html is explained here .把它放在 HTML 文档的顶部。你想用 javascript 做的是当你点击列表中的一个链接时，只有给定的段落 class显示。使用 jQuery 的 click event 最容易做到这一点和 show和 hide方法。

更新了 jQuery 示例

做一个这样的菜单

<ul id="menu">
  <li id="weapon">Weapons</li>
  <li id="crime">Crime</li> 
</ul>

然后使用下面的jQuery

<script>
$(document).ready(function(){

  // When a <li> element inside an <ul> with the id "menu" is clicked, do the following
  $('ul#menu li').click(function(){
    // Get the id of the <li> element and append a '.' so we get the right name for the tag (class) we want to show 
    var tag = '.' + $(this).attr('id');
    // Hide all elements of class 'jnnorm'
    $('.jnnorm').hide();
    // Show all elements with the class name of tag we want
    $(tag).show();
  });
});
</script>

注意:HTML 类表示为 .classname在 jQuery 中，而 HTML id 表示为 #idname .

祝你好运!