树形结构，显示结构中单击的元素的文本
Tree structure, display text of clicked elements from structure
这是我的树结构代码。当我点击标签 1 时得到 class="active"，当我点击亚洲得到 class="open"，当我点击 Southern-West 得到 class="open"，当我点击印度得到 class="selected"。一切都显示在链接上的图片中：http://postimg.org/image/4216vmlpj/
<div class="container responsive-tabs-default">
<ul class="responsive-tabs">
<li><a href="#example-1-tab-1" target="_self">Tag 1</a></li>
<li><a href="#example-1-tab-2" target="_self">Tag 2 </a></li>
</ul>
<div class="responsive-tabs-content bm-larger">
<div id="example-1-tab-1" class="responsive-tabs-panel">
<!-- TREE BEGIN-->
<h1>Naslov</h1>
<!-- <input type="search" id="my-search" placeholder="search"> -->
<ul id="my-tree1">
<li>
<div>Asia</div>
<ul>
<li>
<div>Southern-West</div>
<ul>
<li><div>India</div></li>
<li><div>Pakistan</div></li>
<li><div>Butan</div></li>
</ul>
</li>
<li><div>Southern-East</div>
<ul>
<li><div>Indonesia</div></li>
<li><div >Vietnam</div></li>
<li><div >malaysia</div></li>
</ul>
</li>
<li><div>Far-east</div>
<ul>
<li><div>China</div></li>
<li><div>North Korea</div></li>
<li><div>South Korea</div></li>
<li><div>Japan</div></li>
</ul>
</li>
<li><div>Central</div>
<ul>
<li><div>Mongol</div></li>
<li><div>kazakhstan</div></li>
<li><div>kyrgyzstan</div></li>
</ul>
</li>
</ul>
</li>
<li><div>Antarctica</div></li>
<li>
<div>Africa</div>
<ul>
<li><div>Moroco</div></li>
<li><div>Egypt</div></li>
<li><div>Ghana</div></li>
</ul>
</li>
<li>
<div>Europe</div>
<ul>
<li><div>United Kingdom</div></li>
<li><div>Sweden</div></li>
<li><div>Germany</div></li>
<li><div>France</div></li>
<li><div>Spain</div></li>
<li><div>Italy</div></li>
<li><div>Austria</div></li>
<li><div>Turkey</div></li>
<li><div>Russia</div></li>
<li><div>Denmark</div></li>
<li><div>Finland</div></li>
<li><div>Iceland</div></li>
<li><div>Switzerland</div></li>
<li><div>Hungary</div></li>
</ul>
</li>
</ul>
<!-- TREE END-->
</div>
<div id="example-1-tab-2" class="responsive-tabs-panel">
<h1>Naslov</h1>
<!-- <input type="search" id="my-search" placeholder="search"> -->
<ul id="my-tree2">
<li>
<div>Asia</div>
<ul>
<li>
<div>Southern-West</div>
<ul>
<li><div>India</div></li>
<li><div>Pakistan</div></li>
<li><div>Butan</div></li>
</ul>
</li>
<li><div>Southern-East</div>
<ul>
<li><div>Indonesia</div></li>
<li><div>Vietnam</div></li>
<li><div>malaysia</div></li>
</ul>
</li>
<li><div>Far-east</div>
<ul>
<li><div>China</div></li>
<li><div>North Korea</div></li>
<li><div>South Korea</div></li>
<li><div>Japan</div></li>
</ul>
</li>
<li><div>Central</div>
<ul>
<li><div>Mongol</div></li>
<li><div>kazakhstan</div></li>
<li><div>kyrgyzstan</div></li>
</ul>
</li>
</ul>
</li>
<li><div>Antarctica</div></li>
<li>
<div>Africa</div>
<ul>
<li><div>Moroco</div></li>
<li><div>Egypt</div></li>
<li><div>Ghana</div></li>
</ul>
</li>
<li>
<div>Europe</div>
<ul>
<li><div>United Kingdom</div></li>
<li><div>Sweden</div></li>
<li><div>Germany</div></li>
<li><div>France</div></li>
<li><div>Spain</div></li>
<li><div>Italy</div></li>
<li><div>Austria</div></li>
<li><div>Turkey</div></li>
<li><div>Russia</div></li>
<li><div>Denmark</div></li>
<li><div>Finland</div></li>
<li><div>Iceland</div></li>
<li><div>Switzerland</div></li>
<li><div>Hungary</div></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
我希望文本显示在页面的右侧，就像图片上显示的那样。因此，当我在标签 1 上徘徊时，它被写成标签 1。当我点击亚洲时，上面写着亚洲...就像图片上一样。我找到了一个解决方案，向我显示单击的文本，但无法正常工作。当我点击亚洲时，不仅写了亚洲，还写了亚洲南部-西部印度巴基斯坦 Butan 南部-东南部印度尼西亚越南......因此，当我单击"亚洲"时，将显示亚洲以下树形结构的所有元素，但必须仅显示亚洲。其次，我并不是所有的选集都写好了。因此，如果我选择标签 1 和南极洲，就会显示标签 1 和南极洲，当我点击标签 2 时，标签 1 被标签 2 替换。我希望存储并显示以前的选择，当我进行新选择时，它会写在第一个选择下方。这也必须与各国合作。当我选择标签 1 南极洲，然后欧洲 - 西班牙必须同时显示两个选择时，因此标签 1 南极洲和标签 1 欧洲西班牙。
到目前为止，我想出了一段代码：
<script>
$("").click(function () {
<!-- $(this).addClass('tf-selected');
var str = "";
$("li.active").each(function () {
str += $(this).text() +" ";
});
$(".display_text_here").text(str);
});
</script>
<script>
$("").click(function () {
<!-- $(this).addClass('tf-selected');
var str = "";
$("li.tf-open").each(function () {
str += $(this).text() +" ";
});
$(".display_text_here2").text(str);
});
</script>
<script>
$("").click(function () {
<!-- $(this).addClass('tf-selected');
var str = "";
$("li.tf-selected").each(function () {
str += $(this).text() +" ";
});
$(".display_text_here3").text(str);
});
</script>
<div class="display_text_here"></div>
<div class="display_text_here2"></div>
<div class="display_text_here3"></div>
<!DOCTYPE html>
<!-- Responsive Tabs v1.4, Copyright 2014, Joe Mottershaw, https://github.com/joemottershaw/ -->
<html lang="en" class="no-js">
<head>
<!-- tree begin-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi">
<link type="text/css" rel="stylesheet" href="tree/jquery.treefilter.css">
<link href='http://fonts.googleapis.com/css?family=roboto:400,300,700' rel='stylesheet' type='text/css'>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script> <!-- display selected -->
<style>
body {background:#fff; padding:0;}
.container {font-family:"roboto"; font-size:16px; background:#fff; border-radius:3px;
border:1px solid #ddd;}
h1 {color:#08f; font-weight:100; font-size:44px; margin-top:150px;}
input {background:transparent; font-size:16px; border:1px solid #ddd; border-width:0 0 1px 0; border-radius: 0; line-height:40px; height:40px; width:100%; outline:none;}
ul#my-tree {margin:0; padding:10px 5px; color:#666;}
ul#my-tree li{margin:8px 0;}
div.desc {margin:20px 0; color:#aaa; font-size:11px; text-align:left;}
</style>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href="tabs/css/normalize.css" rel="stylesheet" type="text/css" media="all" />
<link href="tabs/css/responsive-tabs.css" rel="stylesheet" type="text/css" media="all" />
<link href="tabs/css/style2.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body itemscope itemtype="http://schema.org/WebPage">
<table style="width:100%">
<tr>
<td colspan="2" style="background: transparent url('images/top-ozadje2.bmp') repeat-x;">
<!-- Header -->
<h1 style="padding-left:45%"> SELECTION </h1>
</td>
</tr>
<tr>
<td valign="top">
<!-- Content -->
<div class="container responsive-tabs-default">
<ul class="responsive-tabs">
<li><a href="#example-1-tab-1" target="_self">Tag 1</a></li>
<li><a href="#example-1-tab-2" target="_self">Tag 2 </a></li>
</ul>
<div class="responsive-tabs-content bm-larger">
<div id="example-1-tab-1" class="responsive-tabs-panel">
<!-- TREE BEGIN-->
<h1>Naslov</h1>
<!-- <input type="search" id="my-search" placeholder="search"> -->
<ul id="my-tree1">
<li>
<div>Asia</div>
<ul>
<li>
<div>Southern-West</div>
<ul>
<li><div>India</div></li>
<li><div>Pakistan</div></li>
<li><div>Butan</div></li>
</ul>
</li>
<li><div>Southern-East</div>
<ul>
<li><div>Indonesia</div></li>
<li><div >Vietnam</div></li>
<li><div >malaysia</div></li>
</ul>
</li>
<li><div>Far-east</div>
<ul>
<li><div>China</div></li>
<li><div>North Korea</div></li>
<li><div>South Korea</div></li>
<li><div>Japan</div></li>
</ul>
</li>
<li><div>Central</div>
<ul>
<li><div>Mongol</div></li>
<li><div>kazakhstan</div></li>
<li><div>kyrgyzstan</div></li>
</ul>
</li>
</ul>
</li>
<li><div>Antarctica</div></li>
<li>
<div>Africa</div>
<ul>
<li><div>Moroco</div></li>
<li><div>Egypt</div></li>
<li><div>Ghana</div></li>
</ul>
</li>
<li>
<div>Europe</div>
<ul>
<li><div>United Kingdom</div></li>
<li><div>Sweden</div></li>
<li><div>Germany</div></li>
<li><div>France</div></li>
<li><div>Spain</div></li>
<li><div>Italy</div></li>
<li><div>Austria</div></li>
<li><div>Turkey</div></li>
<li><div>Russia</div></li>
<li><div>Denmark</div></li>
<li><div>Finland</div></li>
<li><div>Iceland</div></li>
<li><div>Switzerland</div></li>
<li><div>Hungary</div></li>
</ul>
</li>
</ul>
<!-- TREE END-->
</div>
<div id="example-1-tab-2" class="responsive-tabs-panel">
<h1>Naslov</h1>
<!-- <input type="search" id="my-search" placeholder="search"> -->
<ul id="my-tree2">
<li>
<div>Asia</div>
<ul>
<li>
<div>Southern-West</div>
<ul>
<li><div>India</div></li>
<li><div>Pakistan</div></li>
<li><div>Butan</div></li>
</ul>
</li>
<li><div>Southern-East</div>
<ul>
<li><div>Indonesia</div></li>
<li><div>Vietnam</div></li>
<li><div>malaysia</div></li>
</ul>
</li>
<li><div>Far-east</div>
<ul>
<li><div>China</div></li>
<li><div>North Korea</div></li>
<li><div>South Korea</div></li>
<li><div>Japan</div></li>
</ul>
</li>
<li><div>Central</div>
<ul>
<li><div>Mongol</div></li>
<li><div>kazakhstan</div></li>
<li><div>kyrgyzstan</div></li>
</ul>
</li>
</ul>
</li>
<li><div>Antarctica</div></li>
<li>
<div>Africa</div>
<ul>
<li><div>Moroco</div></li>
<li><div>Egypt</div></li>
<li><div>Ghana</div></li>
</ul>
</li>
<li>
<div>Europe</div>
<ul>
<li><div>United Kingdom</div></li>
<li><div>Sweden</div></li>
<li><div>Germany</div></li>
<li><div>France</div></li>
<li><div>Spain</div></li>
<li><div>Italy</div></li>
<li><div>Austria</div></li>
<li><div>Turkey</div></li>
<li><div>Russia</div></li>
<li><div>Denmark</div></li>
<li><div>Finland</div></li>
<li><div>Iceland</div></li>
<li><div>Switzerland</div></li>
<li><div>Hungary</div></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</td>
<td valign="top">
<div class="container2" >
<ul class="responsive-tabs">
<h3>You have choosen:</h3>
<button type="button" onClick="window.location.reload()">Delete choosen data</button>
<hr>
</ul>
<p>
<script>
$("").click(function () {
<!-- $(this).addClass('tf-selected');
var str = "";
$("li.active").each(function () {
str += $(this).text() +" ";
});
$(".display_text_here").text(str);
});
</script>
<script>
$("").click(function () {
<!-- $(this).addClass('tf-selected');
var str = "";
$("li.tf-open").each(function () {
str += $(this).text() +" ";
});
$(".display_text_here2").text(str);
});
</script>
<script>
$("").click(function () {
<!-- $(this).addClass('tf-selected');
var str = "";
$("li.tf-selected").each(function () {
str += $(this).text() +" ";
});
$(".display_text_here3").text(str);
});
</script>
<div class="display_text_here"></div>
<div class="display_text_here2"></div>
<div class="display_text_here3"></div>
</p>
</div>
</td>
</tr>
<!-- Footer -->
<!-- JavaScript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="tabs/js/smoothscroll.min.js" type="text/javascript"></script>
<script src="tabs/js/backbone.js" type="text/javascript"></script>
<script src="tabs/js/responsive-tabs.min.js" type="text/javascript"></script>
<!-- tree begin -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="tree/jquery.treefilter.js"></script>
<script>
$(function() {
var tree = new treefilter($("#my-tree1"), {
searcher : $("input#my-search"),
multiselect : false });
});
</script>
<script>
$(function() {
var tree = new treefilter($("#my-tree2"), {
searcher : $("input#my-search"),
multiselect : false });
});
</script>
<script>
$(function() {
var tree = new treefilter($("#my-tree3"), {
searcher : $("input#my-search"),
multiselect : false });
});
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.tree = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- tree end -->
</table>
</body>
</html>剪断不能正常工作，因为我的页面后面有manj js和css脚本。
谁能提出如何改善我的解决方案的建议，这将满足我的期望。
谢谢大家的帮助
附言下面的答案很棒。非常感谢您的所有努力。我还有一个问题。当我重新加载(或首次打开(页面时，其中一个选项卡已被选择(打开(，并显示该选项卡的树结构。如果我从树形结构中选择一个国家/地区，我应该更改什么，这个自动选择的选项卡也会自动写在右侧？因为如果我从自动打开的标签中选择一个国家，这个标签的名称不会写在国家名称的前面。
还有一点，当我选择非洲 - 马罗科然后是欧洲 - 德国时，它工作得很好。但是，如果我从非洲(例如埃及(再选择一个，那么这个写的是德国(我得到欧洲 - 德国 - 埃及(。在这种情况下，我应该从之前的选择中写在马罗科下方的埃及，而不是上次选择的德国吗？
这也是图片，显示了我的问题：http://postimg.org/image/icnw0ves3/
还有一个愿望是，如果我选择欧洲，然后选择德国，它显示德国，如果我选择西班牙，删除德国并写西班牙。所以只写最后一个选择。有时我需要写两个选择，有时只是最后一个。
我的老板只是让我的生活复杂化，并有一个愿望，选择的国家是这样写的：
标签1|亚洲：东南=>印度尼西亚;欧洲：德国、西班牙;非洲：马罗科、加纳 Tag2|欧洲：奥地利
我怎么做？
此代码在 Firefox 中不起作用(当单击树结构时写入未定义而不是国家/地区名称(，并且在 ie 中。在铬中工作正常。我应该添加什么？
编辑 - 还有一个问题
首先感谢一切，感谢所有的努力。我还有一个问题，我应该怎么做，如果我选择欧洲，然后选择德国，它会显示德国，如果我选择西班牙，删除德国并写西班牙。所以只写最后一个选择。有时我需要写两个选择，有时只是最后一个。图片：postimg.org/image/mfd4hmuqr 我的老板只是让我的生活复杂化，并有一个愿望，选择的国家是这样写的：Tag1|亚洲：东南=>印度尼西亚;欧洲：德国、西班牙;非洲：马罗科、加纳 Tag2|欧洲：奥地利 我应该怎么做？
编辑结束
我不知道
你的插件在做什么，你的JS代码有点难以理解，但是你的文档结构是一致的，你的要求也不太复杂，所以你实际上可以做到这一点，而无需尝试将多个插件混合在一起。
我使用了您的文档结构和样式规则，但没有您的 JS 代码(包括插件(来实现您的需求。我只在你的根元素ul元素(ids #my-tree 1 和 2 的元素(中添加了一个 tree 类 - 我将进一步解释原因。
基本上，您希望实现以下目标：
- 选项卡选择器("标记 1"和"标记 2"(与
.container .responsive-tabs li a选择器匹配。单击它们时，您希望显示相应的选项卡面板(所有面板都与.responsive-tabs-panel选择器匹配(以及与a元素的href属性匹配的 ID。这意味着只需从单击的元素中获取href属性，从中删除"#"，找到具有相同 ID 的选项卡面板，并向其添加一类active，同时将其从所有其他选项卡面板中删除。所以：
.CSS：
.responsive-tabs-panel{
display:none;
}
.responsive-tabs-panel.active{
display:block;
}
.JS：
var tabs = document.querySelectorAll('.container .responsive-tabs li a'),
tabPanels = document.getElementsByClassName('responsive-tabs-panel');
for(var i=0;i<tabs.length;i++){
tabs[i].addEventListener('click', function(e){
e.preventDefault();
var id = this.getAttribute('href').replace("#","");
for(var j=0;j<tabPanels.length;j++){
if(tabPanels[j].id==id)
tabPanels[j].classList.add('active');
else tabPanels[j].classList.remove('active');
}
},false);
}
- 现在，在选项卡面板的根
ul元素中(我为这两个元素都提供了一类tree(，您的所有选项(无论是大陆、地区还是国家/地区(都与.responsive-tabs-panel li选择器匹配。当此选项具有更多嵌套选项时，在文档结构中意味着该选项具有带有ul标记的子元素，其中包含更多选项。因此，如果单击的选项有更多选项，则希望为其提供一类open并显示这些选项，否则要为其提供一类selected。如果再次单击已打开的选项，则需要将其关闭。因此，在我们的 CSS 中，我们将希望隐藏所有具有li父级ul元素，除非父级具有open类 .
.CSS：
.responsive-tabs-panel .tree{
display:block;
}
.responsive-tabs-panel li ul{
display:none;
}
.responsive-tabs-panel li.open > ul{
display:block;
}
.JS：
var options = document.querySelectorAll('.responsive-tabs-panel li');
for(var k=0;k<options.length;k++){
options[k].addEventListener('click',function(e){
e.stopPropagation();
var optionText = '',
div = null,
hasMoreOptions = false;
if(this.classList.contains('open')){
this.classList.remove('open');
return;
}
for(var l=0;l<this.children.length;l++){
if(this.children[l].tagName.toLowerCase()=='div'){
div = this.children[l];
optionText = div.innerText;
}
else if(this.children[l].tagName.toLowerCase()=='ul'){
hasMoreOptions = true;
}
}
if(!hasMoreOptions){
this.classList.add('selected');
}
else this.classList.add('open');
},false);
}
(e.stopPropagation在这里很重要，因为如果我们不调用它，eventListener 函数也会在作为所点击li的父级的每个li元素上调用。停止它意味着它只会在实际单击的选项上调用，而不是与定义options数组时提供的选择器匹配的所有父项。
正如您可能已经注意到的，我们还从单击的
li元素中提取了选项文本，方法是找到它的div子元素并获取该元素的内部文本。这是因为您要记录用户单击的所有元素。任何时候单击选项卡或选项。最简单的方法是使用单击选项的文本创建一个div 元素，并将其附加到右侧容器中的.container2 p元素。如果您还想显示所选选项的嵌套级别，那么根据您的文档结构，最简单的方法是计算它有多少父
ul元素，直到它到达ul.tree元素(这就是我将类添加到根ul的原因(。您可以将此数字乘以 4 个空格，并在使用几个简单函数将其附加到.container2 p元素时将其添加到选项文本之前。
.
var selectedOptions = document.querySelector('.container2 p');
function getNestingLevel(li){
var level = 1,
parent = li.parentNode;
while(!parent.classList.contains('tree')){
if(parent.tagName.toLowerCase()=='ul')
level++;
parent = parent.parentNode;
}
return level;
}
function updateSelectedOptions(optionText,nestingLevel){
var div = document.createElement('div'),
indent = '';
for(var i=1;i<nestingLevel*4;i++)
indent = indent + ' ';
div.innerHTML = indent+optionText;
selectedOptions.appendChild(div);
}
现在，您只需要在早期的 eventListener 函数中分别插入一行(一行用于标记，一行用于选项(，方法是调用 updateSelectedOptions：
对于标签：
updateSelectedOptions(this.innerText,0);
对于选项：
updateSelectedOptions(optionText,getNestingLevel(this));
这是一支结合了一切的笔：http://codepen.io/anon/pen/zxXZYZ
编辑回应：
IE和Firefox的问题是我使用的是.innerText，而我应该使用更受支持的.innerHTML属性。所以这已经解决了。至于您的其他问题，我也更改了代码以支持您的要求。现在，默认标记(默认情况下打开的.responsive-tabs li a(具有一个default类，如果用户选择选项而不先选择选项卡，则该类将发挥作用。此外，现在还有一个名为 latestOpen 的全局变量，其中包含单击打开的最新元素。现在我们将单击的li元素直接传递给 updateSelectedOptions 函数，该函数计算 latestOpen 元素的接近程度，并使用介于两者之间的所有选项更新.container2 p。它还计算嵌套并更新latestOpen变量。
相关文章：
- 如何使用jquery在填充自动完成的值后使文本框只读
- 使用Clipboard.js复制span文本
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 用程序搜索JQuery数据表中的文本
- jQuery匹配JSON对象的部分文本
- onkeyup无法动态创建多个文本区域
- 树形结构，显示结构中单击的元素的文本
- 如何解析文本区域中的结构化字符串数据(接近JSON）以检索其所需的属性
- 文本框导致结构 JS 中的字体出现问题
- 使用结构 js 向右/向左倾斜画布文本对象
- 如何格式化 html 结构中特定符号内换行的文本并设置其格式
- D3.js树结构文本链接
- 文本区域行应以 XML 结构显示
- JQuery/Javascript - 突出显示文本并环绕标签，而无需更改 html 结构
- 从几乎相同的dom结构中提取内部文本
- jquery克隆了一个没有文本内容的html结构
- 如何在结构文本对象中应用自定义字体
- 将几个结构化文本字符串转换为HTML表
- Javascript基于层次结构获取节点内部文本
- 如何使用这样的脚本或文本编辑器批量更新位于.html文件中的基本一对一密钥结构?
