如何将 link 分配给 xml 中的分支，以便在我在 html 的输出中单击它时打开它

Question

此代码将 xml 文件转换为 html 可扩展树：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
      $.ajax({
        url: "stations10.xml",
        success: function(tree) {
          traverse($('#treeView li'), tree.firstChild)
            // this – is an &mdash;
          $('#treeView li:has(li)').addClass("Max").click(function(e) {
            $(this).toggleClass("Max Min");
            $(this).children().toggle();
            e.stopPropagation();
          })
          $('#treeView li').click(function(g) {

            var mytree2 = $(this);
            mytree2.children('li').toggle();

            g.stopPropagation();
          })

          $('<b></b>').prependTo('#treeView li:has(li)').click(function() {
            var sign = $(this).text()
            if (sign == "–")
              $(this).text('').next().children().hide()
            else
              $(this).text('').next().children().show()
          })
        }
      })
    });

    function traverse(node, tree) {
      var children = $(tree).children()
      node.addClass(tree.nodeName).append(tree)
      if (children.length) {
        var ul = $("<ul>").appendTo(node)
        children.each(function() {
          var li=$('<li>').appendTo(ul)
          traverse(li, this)
        })
      } else {
        $('<ul><li>' + $(tree).text() + '<\/li><\/ul>')
      }
    }
  </script>
    <style type="text/css">
    #treeView li {
      list-style: none;
    }

    #treeView ul {
      padding-left: 1em;
    }

    #treeView b {
      padding-right: 1em;
    }

    .Min {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/plus_zps8o4adn0e.gif") no-repeat;
      padding-left: 15px;
    }

    .Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/minus_zpsk0jlvbaa.gif") no-repeat;
      padding-left: 15px;
    }

    li {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/bullet_zpsblghj3ip.gif") no-repeat;
      padding-left: 15px;
    }

    .MainStation.Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/station_zpswxz6gpqe.jpg") no-repeat;
      background-size: 15px 15px;
      cursor: pointer;
      padding-left: 15px;
    }
    .Substation.Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/sub_zpsspl8dckt.jpg") no-repeat;
      background-size: 15px 15px;
      cursor: pointer;
      padding-left: 15px;
    }
    .Control.Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/control_zpsrfvdzyzp.jpg") no-repeat;
      background-size: 15px 15px;
      cursor: pointer;
      padding-left: 15px;
    }
    .PushButton.Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/pusbutton_zpsspjfsfsp.jpg") no-repeat;
      background-size: 15px 15px;
      cursor: pointer;
      padding-left: 15px;
    }
    .ElectricStation.Max {
      background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/electrical-safety-symbol_zpssdvscba0.gif") no-repeat;
      background-size: 15px 15px;
      cursor: pointer;
      padding-left: 15px;
    }
  </style>
    <title>treeView</title>
  </head>

  <body>
    <ul id="treeView">
      <li></li>
    </ul>
  </body>

</html>

这是 XML 文件：

<?xml version="1.0" encoding="UTF-8"?>
<MAIN xmlns:xlink="http://www.w3.org/1999/xlink"> MAIN
<MainStation 
        xlink:type="extended" 
        xlink:href="http://google.com"
        xlink:show="new"> Mainstation1
    <Substation> Substation1
        <Control>Control1</Control>
        <Control>Control2<MiniControl>MiniControl1</MiniControl><MiniControl>MiniControl2</MiniControl></Control>
        <PushButton>PushButton1</PushButton>
    </Substation>
    <Substation> Substation2
        <Control>Control1<MiniControl>MiniControl1</MiniControl><MiniControl>MiniControl2</MiniControl></Control>
        <Control>Control2</Control>
        <PushButton>PushButton1</PushButton>
    </Substation>
    <Substation> Substation3
        <Control>Control1</Control>
        <Control>Control2</Control>
        <Control>Control3</Control>
        <Control>Control4</Control>
    </Substation>
    <Substation> Substation4
        <PushButton>PushButton1</PushButton>
        <PushButton>PushButton2</PushButton>
    </Substation>
</MainStation>  
<MainStation> Mainstation2
    <Substation> Substation1
        <Control>Control1</Control>
        <Control>Control2</Control>
        <PushButton>PushButton1</PushButton>
    </Substation>
    <Substation> Substation2
        <Control>Control1<MiniControl>MiniControl1</MiniControl><MiniControl>MiniControl2</MiniControl></Control>
        <Control>Control2</Control>
        <PushButton>PushButton1<MiniPushButton>MiniPushButton1</MiniPushButton><MiniPushButton>MiniPushButton2</MiniPushButton></PushButton>
    </Substation>
</MainStation>  
<ElectricStation> ElectricStation1
    <Substation> Substation1
        <Control>Control1</Control>
        <Control>Control2</Control>
        <PushButton>PushButton1</PushButton>
    </Substation>
    <Substation> Substation2
        <Control>Control1<MiniControl>MiniControl1</MiniControl><MiniControl>MiniControl2</MiniControl></Control>
        <Control>Control2</Control>
        <PushButton>PushButton1<MiniPushButton>MiniPushButton1</MiniPushButton><MiniPushButton>MiniPushButton2</MiniPushButton></PushButton>
    </Substation>
</ElectricStation>  
</MAIN>

如您所见，我尝试将主站节点链接到 Google，这样当我在输出中单击它时，它会打开 Google。但是它不起作用。

Answer 1

您可能需要更改扩展脚本。

这是您可以做到的一种方法。我附加了一个 span 标签，这是为了显示图像。我已经添加了点击处理程序来折叠和展开。因此，您必须准确单击图像才能展开或折叠列表。第二个处理程序用于具有 href 属性的标签。单击具有 href 属性的列表时，它将重定向到 link 位置。

注意：我已将 XML 中的 xlink:href 属性更改为 href。

[编辑]

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $.ajax({
                    url: "stations10.xml",
                    success: function(tree) {
                        traverse($('#treeView li'), tree.firstChild)
                        $('<span><\/span>').addClass("Max").prependTo('#treeView li:has(li)')
                        $('.Max,.Min').click(function (e) {
                            $(this).toggleClass("Max Min")
                            $(this).siblings().next().toggle()
                        });
                        $("[href]").click(function(){
                            window.location.href = $(this).attr("href")
                        });
                    }
                })
            });

            function traverse(node, tree) {
                var children = $(tree).children()
                node.addClass(tree.nodeName).append(tree)
                if (children.length) {
                    var ul = $("<ul>").appendTo(node)
                    children.each(function() {
                        var li=$('<li>').appendTo(ul)
                        traverse(li, this)
                    })
                } else {
                    $('<ul><li>' + $(tree).text() + '<\/li><\/ul>')
                }
            }
        </script>
        <style type="text/css">
        #treeView li {
            list-style: none;
        }

        #treeView ul {
        padding-left: 1em;
        }

        #treeView b {
            padding-right: 1em;
        }

        .Min {
            background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/plus_zps8o4adn0e.gif") no-repeat;
            padding-left: 30px;
        }

        .Max {
            background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/minus_zpsk0jlvbaa.gif") no-repeat;
            padding-left: 30px;
        }

        li {
            background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/bullet_zpsblghj3ip.gif") no-repeat;
            padding-left: 30px;
        }

        .MainStation.Max {
            background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/station_zpswxz6gpqe.jpg") no-repeat;
            background-size: 15px 15px;
            cursor: pointer;
            padding-left: 30px;
        }
        .Substation.Max {
          background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/sub_zpsspl8dckt.jpg") no-repeat;
          background-size: 15px 15px;
          cursor: pointer;
          padding-left: 30px;
        }
        .Control.Max {
          background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/control_zpsrfvdzyzp.jpg") no-repeat;
          background-size: 15px 15px;
          cursor: pointer;
          padding-left: 30px;
        }
        .PushButton.Max {
          background:     URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/pusbutton_zpsspjfsfsp.jpg") no-repeat;
          background-size: 15px 15px;
          cursor: pointer;
          padding-left: 30px;
        }
        .ElectricStation.Max {
          background: URL("http://i1341.photobucket.com/albums/o747/Mike_Younes/electrical-safety-symbol_zpssdvscba0.gif") no-repeat;
          background-size: 15px 15px;
          cursor: pointer;
          padding-left: 30px;
        }
        </style>
        <title>treeView</title>
    </head>
    <body>
        <ul id="treeView">
          <li></li>
        </ul>
    </body>
    </html>

XML代码的变化

<MainStation 
        xlink:type="extended" 
        href="http://google.com"
        xlink:show="new"> Mainstation1
        ....

如何将 link 分配给 xml 中的分支，以便在我在 html 的输出中单击它时打开它

how to assign a link to a branch in the xml so that it opens once i click on it in the output of the html

html

xml

hyperlink