Question

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

我有刑法的html文件（一种法律）。它包含许多不同的规则，编号段落（§1，§4等）。
现在我想查看源代码并根据特定条件手动“标记”段落。例如，涉及使用武器的所有段落都会获得“武器”标签，或者最低判决为1年或更高的段落会获得“犯罪”标签等。
最后，我想在Firefox / Chrome中查看交互式html文件，例如我可以点击“犯罪”按钮，所有标有“犯罪”的§§§都会出现在大胆的红色，保持文档的其余部分完好无损。理想情况下，我也可以点击“武器”，只会看到用“武器”标记的§§§，使文档的其余部分消失。

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

非常感谢任何帮助。我主要不知道从哪里开始学习。我是否需要了解HTML，jQuery或Python等编程语言？我是否需要在PC上设置Apache服务器？也许是因为我对编程的无知，这似乎是一个不太复杂的功能。我错误地认为业余爱好者可能会在一个月内建立一些类似的东西吗？

Answer 1

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

您不需要太多的编程技巧，尤其是当您想手动标记内容时。你可能只需要基本的HTML和CSS以及一些Javascript来解决这个问题。

我会做的是以下

创建HTML文件的本地副本（在浏览器中使用“另存为”）
通过为每个§提供适当的标记作为类名
创建所有可用标记的列表，让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。所以上面的例子将成为（如果标签武器是合适的）：

<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类在jQuery中表示为.classname，而HTML id表示为#idname。

Answer 2

这可以使用纯HTML / CSS和Javascript来完成，因此不需要服务器。 JQuery会让javascript更容易。

如何做的基本思路：

为“标签”使用CSS样式类
为每个标记创建一个按钮，其中包含一个onclick处理程序，该处理程序使用JQuery突出显示该标记的所有内容（或使其他所有内容都不可见）

HTML源代码实际上看起来结构很好，但它可以为子段使用更多的换行符。任何好的HTML / XML编辑器都有一个autoformat功能来处理这个问题，尽管你可以使用带有方便的文本操作工具的编程语言获得你想要的任何特定格式，例如Perl，awk或Python。

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

2 个答案: