js获取当前点击的<li>的值

js获取当前点击的<li>的值,第1张

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">

<!DOCTYPE html>

<head>

<style type="text/css">

ul{

    list-style:none; / 去掉ul前面的符号 /

    margin: 0px; / 与外界元素的距离为0 /

    padding: 0px; / 与内部元素的距离为0 /

    width: auto; / 宽度根据元素内容调整 /

}

/ 所有class为menu的div中的ul中的li样式 /

ul li{float:left; / 向左漂移,将竖排变为横排 /}

#ulImages li{display:none};

</style>

<script>

function show(id){

var images = documentgetElementById("ulImages")getElementsByTagName("li");

for(var i=0;i<imageslength;i++){

images[i]styledisplay = "none";

}

images[id]styledisplay = "block";

}

</script>

</head>

<body>

<div id="t_c_ggao">

    <ul id="ulImages">

    <li style="display:block"><img src="images/list-1jpg" width="480" height="200"/>1</li>

    <li><img  src="images/list-1jpg" width="480" height="200" />2</li>

    <li><img src="images/lp570jpg" width="480" height="200"/>3</li>

    <li><img  src="images/qx570jpg" width="480" height="200" />4</li>

    <li><img  src="images/ys570jpg" width="480" height="200"/>5</li>

    <li><img  src="images/zx570jpg" width="480" height="200" />6</li>

    <li><img  src="images/list-1jpg" width="480" height="200" />7</li>

    </ul>

 <ul id="list_number">

   <li><a href="#" onclick="show(0)">1</a></li>

   <li><a href="#" onclick="show(1)">2</a></li>

   <li><a href="#" onclick="show(2)">3</a></li>

   <li><a href="#" onclick="show(3)">4</a></li>

   <li><a href="#" onclick="show(4)">5</a></li>

   <li><a href="#" onclick="show(5)">6</a></li>

   <li><a href="#" onclick="show(6)">7</a></li>

      </ul>

  </div>

  </body>

  嗯貌似我回答晚了,仅供参考吧,欢迎交流学习qQgroup21/77/712

var dv=documentgetElementById("star"); 获取id="star"的div

var ularr=dvgetElementsByTagName("ul"); 获取div下的ul

var liarr=ularr[0]getElementsByTagName("li"); 获取div下的ul下的li

liarr是个数组。

其实最简单方法是给ul一个id=“getli”;

然后var liarr=documentgetElementById("getli")getElementsByTagName("li");

liarr是个数组

以上就是关于js获取当前点击的<li>的值全部的内容,包括:js获取当前点击的<li>的值、ul li ul il结构用js怎么获取最底层的li对象、js怎样获取点击的是第几个li等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9723539.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-01
下一篇2023-05-01

发表评论

登录后才能评论

评论列表(0条)

    保存