如何在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

查看：68
本文介绍了如何在xml中为链接指定一个分支，这样一旦我在html的输出中点击它就会打开它的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

此代码将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）{
遍历（$（'＃treeView li'），tree.firstChild）
 //这是一个& mdash; 
 $（'＃treeView li：has（li）'）。addClass（ （Max））。click（function（e）{
 $（this）.toggleClass（Max Min）; 
 $（this）.children（）。toggle（）; 
点击（函数（g））{
 
 var mytree2 = $（this）; $ b（
 $）
 $（'＃treeView li'）。 （b）
 
 $（'< b> b> < / b>'）。prependTo（'＃treeView li：has（li）'）。click（function（）{
 var sign = $（this）.text（）
 if ==） - ）
 $（this）.text（''）。next（）。children（）。hide（）
 else 
 $（this）.tex t（''）。next（）。children（）。show（）
}）
} 
}）
}）; 
 
函数遍历（节点，树）{
 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>< ;'+ $（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-重复; 
 background-size：15px 15px; 
光标：指针; 
 padding-left：15px; 
} 
 .Substation.Max {
 background：URL（http://i1341.photobucket.com/albums/o747/Mike_Younes/sub_zpsspl8dckt.jpg）no-repeat; 
 background-size：15px 15px; 
光标：指针; 
 padding-left：15px; 
} 
 .Control.Max {
 background：URL（http://i1341.photobucket.com/albums/o747/Mike_Younes/control_zpsrfvdzyzp.jpg）no-repeat; 
 background-size：15px 15px; 
光标：指针; 
 padding-left：15px; 
} 
 .PushButton.Max {
 background：URL（http://i1341.photobucket.com/albums/o747/Mike_Younes/pusbutton_zpsspjfsfsp.jpg）no-repeat; 
 background-size：15px 15px; 
光标：指针; 
 padding-left：15px; 
} 
 .ElectricStation.Max {
 background：URL（http://i1341.photobucket.com/albums/o747/Mike_Younes/electrical-safety-symbol_zpssdvscba0.gif）no-重复; 
 background-size：15px 15px; 
光标：指针; 
 padding-left：15px; 
} 
< / style> 
< title> treeView< / title> 
< / head> 
 
< body> 
< ul id =treeView> 
< li>< / li> 
< / ul> 
< / body> 
 
< / html>

这是XML文件： 

 <？xml version =1.0encoding =UTF-8？> 
 
< MainStation 
 xlink：type =extended
 xlink：href =http://google.com
 xlink：show =new> Mainstation1 
<变电站> 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 
<变电站> 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 
<变电站> 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，以便当我点击它时在输出中，它打开Goog​​le。然而，它不起作用。

解决方案

您可能需要更改脚本才能展开。



这是您可以做到的一种方式。我附加了一个span标签，这是为了显示图像。我添加了点击处理程序来折叠并展开到此处。因此，您必须完全点击图像才能展开或折叠列表。第二个处理程序用于具有href属性的标记。点击具有href属性的列表，它将重定向到链接位置。



注意：我已将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）{
遍历（$（'＃treeView li'），tree.firstChild）
 $（'< span>< \ / span>'）。addClass（Max）。prependTo（'＃treeView li ：（$）$（$）
 $（'。Max，.Min'）。click（function（e）{
 $（this）.toggleClass（Max Min）
 $ （this）.siblings（）。next（）。toggle（）
}）; 
 $（[href]）。click（function（）{
 window.location.href = $（this）.attr（href）
}）; 
} 
}）
}）; 
 
函数遍历（节点，树）{
 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>< ;'+ $（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-重复; 
 background-size：15px 15px; 
光标：指针; 
 padding-left：30px; 
} 
 .Substation.Max {
 background：URL（http://i1341.photobucket.com/albums/o747/Mike_Younes/sub_zpsspl8dckt.jpg）no-repeat; 
 background-size：15px 15px; 
光标：指针; 
 padding-left：30px; 
} 
 .Control.Max {
 background：URL（http://i1341.photobucket.com/albums/o747/Mike_Younes/control_zpsrfvdzyzp.jpg）no-repeat; 
 background-size：15px 15px; 
光标：指针; 
 padding-left：30px; 
} 
 .PushButton.Max {
 background：URL（http://i1341.photobucket.com/albums/o747/Mike_Younes/pusbutton_zpsspjfsfsp.jpg）no-repeat; 
 background-size：15px 15px; 
光标：指针; 
 padding-left：30px; 
} 
 .ElectricStation.Max {
 background：URL（http://i1341.photobucket.com/albums/o747/Mike_Younes/electrical-safety-symbol_zpssdvscba0.gif）no-重复; 
 background-size：15px 15px; 
光标：指针; 
 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 
 ....


This code converts an xml file to an html expandable tree:

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

This is the XML file:

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

As you can see, I tried linking the main station node to Google so that when I click on it in the output, it opens Google. However it's not working.

解决方案

You may have to change the script for expanding.

Here is one way you could do it. I have appended a span tag, this is to display the images. I have added the click handler to collapse and expand to this. So you will have to click exactly on the image to expand or collapse the list. The second handler is for the tags with href attribute. On click of the list with the href attribute it will redirect to the link location.

Note: I have changed the xlink:href attribute in the XML to just href.

[EDIT]

Full code

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

The change in XML code

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

这篇关于如何在xml中为链接指定一个分支，这样一旦我在html的输出中点击它就会打开它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆