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;
}

错误image 它在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>

css菜单或脚本不适用于ie

3 个答案: