javascript swap text block onclick anchor link

Это должно быть легко, но это не работает должным образом ... Я довольно ржавый на javascript и не могу понять, что мне не хватает.javascript swap text block onclick anchor link

У меня есть навигатор, который я бы хотел исчезнуть, когда человек нажимает на маленькую стрелу, оставляя только вторую стрелку. Когда пользователь нажимает на вторую стрелку, снова появляется панель навигации. Все навигаторы находятся в одном теге. Само навигационное меню довольно длинное, по одной причине я хочу дать пользователю возможность включать и выключать его.

функция Javascript в голове выглядит следующим образом:

<script type="text/javascript"> 
function collapseMenu() 
{document.getElementById("navbar").innerHTML ='<td id=navbar2><a href="javascript:void(0)" onclick="collapseMenu('navbar2');"><img src="arrow.gif"></a></td>'; 
}</script>

Текст на странице:

<div id='navbar'> 
<td> 
<a href="javascript:void(0)" onclick="collapseMenu('navbar');"><img src="arrow.gif"></a> 
</td> 
</div>

Размещение идентификатора в сНу тега, он показывает стрелка при нажатии на ссылку, но Безразлично 't удалите старый html между тегами div. То же самое с использованием span вместо div и без разницы между одиночными и двойными кавычками. Когда я перемещаю идентификатор id = "navbar" в тег, панель навигации исчезает, но цвет фона остается неизменным для размера старого тега td. Я хотел бы, чтобы он оставался пустым, за исключением крошечной стрелы. Поэтому вопрос 1 - почему div и span не работают, или, альтернативно, td оставляют цвет фона в старом пространстве.

2-й вопрос заключается в том, как указать innerHTM в тексте через переменную. Было бы неплохо не включать эту функцию в заголовок.

Спасибо за любые идеи!

источник

2012-04-08 user1260310

Возможно ли это? Может быть, [jsFiddle] (http://jsfiddle.net/)? – Whymarrh

вырезать и проследовать в файл .txt и переименовать .htm, и вы увидите, что я получаю. – user1260310

Не знаю, что такое jsfiddle, но следующий код воспроизводит проблему, если положить в .htm-файл. Спасибо.

<html> 
<head> 
<script type="text/javascript"> 
function hideBar() 
{document.getElementById("navbar").innerHTML ='<td>show navbar</td>'; 
}</script> 
<script type="text/javascript"> 
function hideBar2() 
{document.getElementById("navbar2").innerHTML ='<td>show navbar</td>'; 
}</script> 
</head> 
<body> 
<table width=500> 
id in td tag 
<tr> 
<td rowspan=3 bgcolor="yellow" id="navbar"> 
<a href="javascript:void(0)" onclick="hideBar('navbar');">hide 

menu</a><br>menu1<br>menu2<br>menu3<br>menu4 
</td> 
</tr> 
<tr><td>lots of content here<br>more content<br>more content<br>more<br>blah<br>blah<br>blah</td> 
</tr> 

</table> 


<table width=500> 
id in div tag 
<tr> 
<div id="navbar2"> 
<td rowspan=3 bgcolor="yellow"> 
<a href="javascript:void(0)" onclick="hideBar2('navbar2');">hide 

menu</a><br>menu1<br>menu2<br>menu3<br>menu4 
</td></div> 
</tr> 
<tr><td>lots of content here<br>more content<br>more content<br>more<br>blah<br>blah<br>blah</td> 
</tr> 

</table> 
</body> 
</html>

источник

2012-04-09 11:59:38 user1260310

Работал, когда я переместил ссылку на функцию из div, которую нужно заменить, поэтому я думаю, что с помощью div вы не можете заменить контент, содержащий ссылку для замены. Кажется, должен быть способ сделать этот общий обмен, однако, – user1260310

Следующие листья одной линии фона расширяют gif. Перемещение gif вне div отменяет выравнивание ячейки. Поймите, что таблицы больше не считаются передовой практикой, но переработка табличной структуры всего сайта будет большой задачей.

<html> 
    <head> 
     <script type="text/javascript"> 
      function toggleBar(obj) { 
       var navbar = document.getElementById("navbar"); 
       if (navbar.style.display == "none") { 
        navbar.style.display = ""; 
        obj.innerHTML = "<img src='images/collapse.gif' alt='Hide Menu'>"; 
       } else { 
        navbar.style.display = "none"; 
        obj.innerHTML = "<img src='images/expand.gif' alt='Show Menu'>"; 
       } 
      } 
     </script> 
    </head> 
    <body> 
    <body><table><tr><td valign="top"> 
     <div style="background-color:lightgrey;text-align:left;padding-left:4px;width:80px;"> 
      <a href="javascript:void(0)" onclick="toggleBar(this);"><img src="images/collapse.gif" 

    alt="Hide Menu"></a> 
      <div id="navbar">menu1<br>menu2<br>menu3<br>menu4</div> 
     </div> 
    <td valign="top"><table><tr style="background-color:blue;"><td><font 

    color="white">Title</font></td></tr> 
    <tr><td>Body Text</td></tr></table> 
    </body>

источник

2012-04-15 16:57:19 user1260310

Решение! Избавьтесь от цвета фона за расширением, взяв один атрибут цвета из div вокруг navbar и вместо этого скопировав innerhtml для развала и разворота, а также сглаживая ссылку и навигацию в теле с уважаемыми div, которые имеют собственные атрибуты цвета, например. obj.innerHTML = "

", другими словами, цветной каждый предмет отдельно. Обманом для всего этого было правильное размещение тегов стиля в divs, span, tds. и т.п. – user1260310

javascript swap text block onclick anchor link

ответ

Смежные вопросы