Question

徒劳地试图让嵌套链接在嵌套范围内工作。 This是以下代码的工作测试页，用于解释我正在尝试做的事情。

有关如何使用有效的html工作的任何想法？我想这是一个嵌套顺序或样式语法的东西，但我不知所措。任何想法都非常感激。

<div id="greyback">
<ul id="scrollbox">
<li class="listcat">List header</li>
<li><a class="menu" href="#freeze">List item 1<span><b>This text has popped up because you have clicked the list item, which has an "a" tag and now has :focus. That "a" tag is the first of two.</b><br><br>What I am trying to do is to set the second "a" tag as a DIFFERENT "embedded" link in this box<span style="color: blue; background-color: yellow;">eg, here<a href="http://www.conservationenterprises.com" target="blank">This is the second (nested) "a" tag in this html nest.  It is a link to an external site. Instead of this being an always-visible link, I want it to sit within the yellow box in the first span (click the List item 1 to display).</a></span>
</a></span>
</li>
</a></span>
</li>
</ul>
</div>

和CSS：

#scrollbox  {margin: 0 auto; margin-top: 1em;  margin-bottom: 1em; width:19em; height:auto;  max-height: 21em; overflow:auto; border-bottom: 0.1em solid #FFA500; border-top: 0.1em solid #FFA500;}

#scrollbox a {float: left; color:#000000; text-decoration:none; width:18em; height: auto; margin-bottom: 0.5em; font-family: Arial, sans-serif; font-size: 0.9em; text-align:left;}
#scrollbox a.menu {}
#scrollbox a span {display:none; position:absolute; left:0em; top:0;}
#scrollbox a span img {float: right; border:0; max-width:7.5em;}
#scrollbox a:hover {border: 0; color: #7ebb11; font-size:0.9em;}
#scrollbox a:hover span {border: 0; color: #535353;}
#scrollbox a span:focus {color: blue;}
#scrollbox a:active {border:none; color: #535353; text-decoration: none;}
#scrollbox a:focus {border:0em solid #000; outline:0;}
#scrollbox a:active span, #scrollbox li a:active span, #scrollbox a:focus span, #scrollbox li a:focus span  {display: block; width: 52.5em; min-height: 20em; height: auto; left: 1.5em; top:18em;  z-index:10; font-size:0.9em; text-align: left; padding: 1em; padding-bottom: 0em; background-color: #c3FFe3; color: #535353; border: solid #FFA500 0.25em;}
#scrollbox li a:active span span, #scrollbox li a:focus span span{display: block; width: auto; height: auto; min-height: 2em;  left: 25em; top:10em;  z-index:10; font-size:0.9em; text-align: left; padding: 1em; padding-bottom: 0em; background-color: transparent; color: #535353;  border: dashed red 1px;}

.ul#scrollbox {padding-left: 0.1em;}

#scrollbox li {float:left; list-style: none; background: url(blank.png) no-repeat left center; margin-left: 0em; font-family:Arial, sans-serif; font-size: 0.9em;}
#scrollbox li.listcat {float: left; text-align:left; width: 18em; margin-left: 0em; margin-top: 0.1em; margin-bottom: 0.3em; padding-top:0.5em; color: green; font-size: 0.9em; font-weight:bold;}

干杯帕特里克。

Answer 1

是的，你的结束标签在错误的位置，我认为你的跨度放错位置，但只是验证会向你显示这些错误。

Answer 2

如果您使用的是jquery（或使用$符号的类似javascript框架）：

<div id="popup" style="display: hidden">
   <span><b>This text has popped up because you have clicked the list item, which has an "a" tag and now has :focus. That "a" tag is the first of two.</b>
</div>

<li>
  <a href="your first link" onclick="$('popup').setStyle('display: block;')">first link</a>
  <a href="second link">second link</a>
</li>

您也可以使用onfocus代替onclick。如果您没有JavaScript库，请使用document.getElementById（'popup'）而不是$ sign。

这是一个关于如何在jquery中隐藏一些div的非常简单的教程：http://api.jquery.com/hide/

Answer 3

你肯定需要使用Javascript（虽然肯定不是Jquery，特别是如果Javascript看起来对你来说很陌生）。现在，你正试图在另一个链接中嵌入一个链接，我认为这不能正常工作。

我建议使用唯一的div ID，HTML DOM会显示您的div和链接。这是过于简单的，但是像这样：

<div id="one"><a href="#" onclick="document.getElementById('two').style.display='block'">Link 1</a></div>
<div id="two" style="display: none;">Here it is</div>

W3Schools.com有一个非常好的Javascript tutorial让你入门。

编辑：几个旁注。学习Javascript基础知识非常值得您花时间。另外，请尝试始终使用well-formed html。

嵌套<a> and <span> challenge</span></a>

3 个答案: