jquery点击左侧任意一个li，右侧相应切换li的内容，怎么实现
3个回答
展开全部
<style>
.left{float: left;width: 100px;overflow: hidden;}
.left li{height: 30px;line-height: 30px;text-align: center;}
.right{float: left;width: 100px;height: 400px;}
.right li{display: none;color: #f00;}
</style>
<!-- 左侧li -->
<ul class="left">
<li>第1个标题</li>
<li>第2个标题</li>
<li>第3个标题</li>
<li>第4个标题</li>
</ul>
<!-- 右侧li内容 -->
<ul class="right">
<li>1.左侧HTML</li>
<li>2.左侧HTML</li>
<li>3.左侧HTML</li>
<li>4.左侧HTML</li>
</ul>
//js代码
<script type="text/javascript">
$(function(){
$(".right li").eq(ind).show();
$(".left li").click(function(){
var ind = $(".left li").index(this);
$(".right li").eq(ind).show().siblings().hide();
})
})
</script>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
target标签指定在何处打开。
<li><a href="pref.html" target="view_window">Preface</a></li>
<li><a href="pref.html" target="view_window">Preface</a></li>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
本人亲测
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<style>
.r li{display:none;}
</style>
<script>
$(document).ready(function(){
$("#l li").click(function(){
var n=$(this).index();
$("#r li").css("display","none");
$("#r li:eq("+n+")").css("display","block");
})
})
</script>
</head>
<body>
<ul id="l"><li id="aa" >1</li><li>2</li></ul>
<ul id="r" class="r"><li>1</li><li>2</li></ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<style>
.r li{display:none;}
</style>
<script>
$(document).ready(function(){
$("#l li").click(function(){
var n=$(this).index();
$("#r li").css("display","none");
$("#r li:eq("+n+")").css("display","block");
})
})
</script>
</head>
<body>
<ul id="l"><li id="aa" >1</li><li>2</li></ul>
<ul id="r" class="r"><li>1</li><li>2</li></ul>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
