Jquery获取ul下的第几个li元素,点击对应链接后显示对应内容。

html元素：

<ul>
<li><a href="#">PhotoShop软件</a></li>
<li><a href="#">illustrator软件</a></li>
<li><a href="#">Dreamweaver软件</a></li>
<li><a href="#">Fireworks软件</a></li>
</ul>

点击链接需要显示的内容：

<div class="middle">
<pPhotoShop有很多功能，在图像，图形，文字，出版等方面都有涉及。</p>
</div>
<div class="middle">
<p>Illustrator可以为线稿提供较高的精度和控制，简单到复杂项目都能生产。</p>
</div>

Jquery部分：

<script type="text/javascript">
$(function(){
if($(".middle").css('display') == 'none'){/*如果没有内容显示就显示第一个*/
$(".middle").eq(0).show();
}
$("li").click(function(){
$(".middle").hide();
var max = $("ul li").length; //得到总的长度
var num = max - $(this).nextAll().length ;//获取当前是第几个li被点击
$(".middle").eq(num - 1).show();/*显示第几个内容*/
})
})
</script>

最后

以上就是虚幻菠萝为你收集整理的Jquery获取ul下的第几个li元素,点击对应链接后显示对应内容。的全部内容，希望文章能够帮你解决Jquery获取ul下的第几个li元素,点击对应链接后显示对应内容。所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。