Вложенные <a>и <span>вызов

Question

Тщетная попытка получить вложенную ссылку, работающую в пределах вложенного промежутка. Это - рабочая тестовая страница для приведенного ниже кода, объясняющая, что я пытаюсь сделать.

Любые идеи о том, как заставить это работать в действительном 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;} 

Приветствие Patrick.

Answer 1

Да, у вас есть закрывающие теги не в том месте, и я думаю, что у вас есть смещенные пролеты, но только проверка покажет вам эти ошибки.

Answer 2

Вам, безусловно, нужно будет использовать Javascript для этого (хотя, конечно, не Jquery, особенно если Javascript уже кажется вам чуждым).Прямо сейчас вы пытаетесь встроить ссылку в другую ссылку, и я не думаю, что она когда-либо будет работать правильно.

Я бы предложил использовать уникальные div идентификаторы, а 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 , с которого можно начать.

Редактировать: Пара сторонзаметки.Изучение основ Javascript будет стоить вашего времени.Кроме того, старайтесь всегда использовать правильно сформированный html .

Answer 3

при условии, что вы используете 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') вместо знака $.

Вот очень простой урок о том, как скрыть некоторые div в jquery: http://api.jquery.com/hide/