jquery点击左侧任意一个li,右侧相应切换li的内容,怎么实现

如题所述

<ul style="float:left; width:20%;">
<li>111111111111</li>
<li>222222222222</li>
<li>333333333333</li>
<li>444444444444</li>
</ul>
<div id=content style="float:right:width:70%"></div>
<script>
/*以下代码适用于jquery*/
$(function(){
    $("ul li").on("click",function(){
        $("#content").html("您点击的是"+$(this).html());
    });
});
/*以下代码适用于原生JavaScript*/
window.onload=function(){
    var lis=document.getElementsByTagName("li");
    for(var i=0;i<lis.length;i++){
        lis[i].onclick=function(){
            document.getElementById("content").innerHTML="您点击的是"+this.innerHTML;
        }
    }
}
</script>

温馨提示:内容为网友见解,仅供参考
无其他回答

jquery点击左侧任意一个li,右侧相应切换li的内容,怎么实现
1.监听左侧li的点击事件并获得li的值 2.获得右侧需要展示内容的容器,将获得的值设置进去

jquery点击左侧任意一个li,右侧相应切换li的内容,怎么实现
<ul style="float:left; width:20%;"><li>111111111111<\/li><li>222222222222<\/li><li>333333333333<\/li><li>444444444444<\/li><\/ul><div id=content style="float:right:width:70%"><\/div><script>\/*以下代码适用于jquery*\/$(function(){ $("ul li").on("click",function(){ ...

jquery如何实现点击LI标签和下面的LI互换顺序?
1、首先打开huilder软件,新建一个html文件,写入html的结构,先设置一个外层的div并设置class属性,div中在设置一个span标签显示标题,和一个无序列表:2、然后在上面的style标签中设置样式,外层的box设置宽度,间距和边框,标题设置颜色和字体倾斜,内容设置宽度、边框和盒子内外边距,并且把字体调即可:3...

JQuery 如何控制li 默认第一个是点击样式,点击其它li 又变回普通...
('ul').on('click', 'li', function(e){ $('ul li').removeClass('active'); $(e.target).addClass('active');});设置好active的样式即可 代码是示例,按实际情况改写即可

jq:求助!!\/\/当鼠标点击li给li赋予一个class,当鼠标点击另一个li的时 ...
(function(){ ("#Tab ul > li").click(function(){ (this).addClass("current").siblings().removeClass("current");})}) \/\/给Li一个点击事件,给当前点击的li一个class然后去掉同辈li的class,就这么简单

交换li的位置
改变 li:eq(0)括号中的值,即可实现与指定位置的li元素进行位置交换。jQuery有一个非常方便的方法来交换li的顺序swap方法。这个方法可以帮助用户在HTML中交换两个元素的位置。选取的是第2个和第5个li。因为在JavaScript中,元素(包括LI元素)都是从0开始计数的,所以用户需要用.eq()方法来选中指定...

jquery代码,点击图片中左侧或者右侧一个箭头图片,怎样实现图片切换
.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=...

jQuery实现多个li点击切换和显示隐藏
这个,最好把你的html代码也贴出来吧。(function(){ $("#topnav li").each( $(this).bind("click",function(){ $(this).siblings().removeClass("click").children("span").css("display" ,"none"); $(this).addClass("click").children("span").css("display",...

交换li的位置,有懂得吗?
交换li的位置 点击LI标签和下面的LI互换顺序 创建Html元素 设置css样式 编写jquery代码 观察效果 初始样式 交换位置”也称为替换符号,在语文中表示替换的修改符号表示形式如图所示:“替换符号”是语文中常用的修改符号,在语文中除了替换符号,还有改正、增补、删去、保留、换字、对调次序、移位、另起行、...

JS如何实现多级菜单中当前菜单不随页面跳转样式而发生变化的详细...
二.应用场景 当一个项目使用公共模板文件时(如上图的左侧菜单栏),我们给每个子菜单添加链接时,点击页面跳转样后还是公共模板的样式,这时就需要实现动态加载当前菜单的样式。三.实现方法第一种:.通过php传递变量,模板页面通过接收这些变量来实现当前页面的菜单选中与否,父级展开等这些样式缺点:虽然...

相似回答