CSS菜單或腳本不起作用，即

Question

感謝任何可以幫助我的人！

我在php上有一個CSS菜單，並且在html上使用了此腳本：

<script type="text/javascript">
function showPic (whichpic) {
 if (document.getElementById) {
  document.getElementById('imgContenedor').src = whichpic.href;
  if (whichpic.title) {
      document.getElementById('imgDescripcion').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
  }
  return false;
 } else {
  return true;
 }
}
</script>

和菜單：

<div id="subopciones" class="menudesp">

        <table border="0" id="tabla_submenu" cellpadding="0" cellspacing="0">
            <tr>
    <td id='celda_submenu'><li><a href="" id='opcion_submenu' >Mobiliario Urbano</a>
        <ul>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/urbano01.jpg">&nbsp Circuito Espectacular Barcelona</a></li>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/urbano02.jpg">&nbsp Circuito Oppi Barcelona</a></li>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/urbano03.jpg">&nbsp Circuito Mupi Urbano Barcelona</a></li>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/urbano04.jpg">&nbsp Circuito Mupi Central Barcelona</a></li>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/urbano05.jpg">&nbsp Circuito Mupi Premium Barcelona</a></li>
        </ul>
    </li></td>
    <td id='espacio_submenu'></td>
    <td id='celda_submenu'><li><a href='' id='opcion_submenu' >Transporte</a>
        <ul>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/transporte01.jpg">&nbsp Buses Urbanos Palma de Mallorca</a></li>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/transporte02.jpg">&nbsp Vehículos Promocionales</a></li>
        </ul>
    </li></td>
    <td id='espacio_submenu'></td>
    <td id='celda_submenu'><li><a href='productos.php?pant=digital' id='opcion_submenu' >Digital Gran Formato</a>
        <ul>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/digital01.jpg">&nbsp Pantallas</a></li>
        </ul>
    </li></td>
    <td id='espacio_submenu'></td>
    <td id='celda_submenu'><li><a href='productos.php?pant=transportes' id='opcion_submenu' >Nieve</a>
        <ul>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/nieve01.jpg">&nbsp Circuito Vallas Montaña</a></li>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/nieve02.jpg">&nbsp Circuito Oppis Montaña</a></li>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/nieve03.jpg">&nbsp Circuito Pilonas</a></li>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/nieve04.jpg">&nbsp Lonas Montaña</a></li>
        </ul>
    </li></td>
    <td id='espacio_submenu'></td>
    <td id='celda_submenu'><li><a href='productos.php?pant=espectacular' id='opcion_submenu' >Zonas de Ocio</a>
        <ul>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/zonas01.jpg">&nbsp Circuito Parques de Ocio</a></li>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/zonas02.jpg">&nbsp Centros Comerciales</a></li>
        </ul>
    </li></td>
            </tr>

        </table>
</div>

和這里的CSS

ul{
  margin:0;
  padding:0;
}

.menudesp li {
    display:block !important;
    position:relative;
    font-size:12px;
    color:#000000;
    width:100%;
    height:23px;
    line-height:23px;
    background-color:#EDEDED;
    text-align:left;
}



.menudesp li a {
color: #000000;
font-size:10px;
display: block;
position: relative;
width: 180px;
}

.menudesp li a:hover {
color: #000;
}


.menudesp li ul {
display: none;
padding: 10px 0;
position: absolute;
margin: -8px 0px;
}

.menudesp li:hover ul {
display: block;
}

/*
.menudesp li ul li {
display: block;
float: none;
position: relative;
color: #fff;
padding: 0 20px;
line-height: 30px;
}*/

.menudesp li ul li a{
color: #444;
}

.menudesp li ul li a:hover {
color: #000;
}

.menudesp li a:hover {
color: #000;
}li a:hover {
color: #000;
} {
color: #000;
}lor: #000;
}

這是錯誤圖片 ，它在chrome上效果很好，但在IE中沒有任何提示？？？ 我真的不知道在哪里看！

Answer 1

嘗試使用innerHTML屬性而不是nodeValue ：

function showPic (whichpic) {
 if (document.getElementById) {
  document.getElementById('imgContenedor').src = whichpic.href;
  if (whichpic.title) {
      document.getElementById('imgDescripcion').innerHTML = whichpic.innerHTML;
  }
  return false;
 } else {
  return true;
 }
}

Answer 2

我只是讀到有人抱怨每個人都在推薦jQuery（或其他一些javascript框架），但這恰恰是他們用來...抽象出javascript實現中固有差異的原因。

因此，事不宜遲，我向您介紹您的jQuery解決方案。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script type="text/javascript">
function showPic (whichpic) {

 var wpic = jQuery(whichpic); // make our object jQuerified

 jQuery('#imgContenedor').attr("src", wpic.attr("href"); // Set our image container

 jQuery('#imgDescripcion').html(wpic.html()); // Set our image description

  return false;
}
</script>

您可以更進一步，並刪除內聯onclick並執行...

<script type="text/javascript">
  jQuery("#celda_submenu li<a").click(showPic); // This will bind to all anchor (a) elements nested below an li inside an element with celda_submenu as the id.
</script>

Answer 3

為什么ul元素定義了兩次？ 而且第一次是在桌子外面。 您的HTML似乎已損壞，這肯定會導致瀏覽器之間的差異。

<div id="subopciones" class="menudesp">
        <table border="0" id="tabla_submenu" cellpadding="0" cellspacing="0">
            <tr>
    <td id='celda_submenu'><li><a href="" id='opcion_submenu' >Mobiliario Urbano</a>
        <ul>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/urbano01.jpg">&nbsp Circuito Espectacular Barcelona</a></li>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/urbano02.jpg">&nbsp Circuito Oppi Barcelona</a></li>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/urbano03.jpg">&nbsp Circuito Mupi Urbano Barcelona</a></li>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/urbano04.jpg">&nbsp Circuito Mupi Central Barcelona</a></li>
        <li><a onclick="return showPic(this)" href="Imatges/productosnuevos/urbano05.jpg">&nbsp Circuito Mupi Premium Barcelona</a></li>
        </ul>
    </li></td>
            </tr>

        </table>