css菜单或脚本don'I don’我不干ie

css menu or script don't work on ie

本文关键字:don ie 菜单 脚本 css      更新时间:2023-09-26

感谢任何能帮助我的人!

我在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中没有,有什么想法吗???我真的不知道该往哪里看!

尝试使用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;
 }
}

我刚刚读到有人抱怨每个人都推荐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>

为什么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>