2顶

左右列表框内容点击切换效果

稿源：互联网 2022-04-02 21:43:08 点击： 3975 撤稿纠错

点击列表框内容自动跳转到对面列表框，可自定义最多允许跳转个数。

以下讨论的是和列表框切换相关的左右列表框内容点击切换效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 仿QQ好友选择效果 站长特效网欢迎您。</title>
<style type="text/css">

</style>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<div id="www_zzjs_net">
  <div id="zzjs_net">
    <div id="_zzjs_net">你最多可以选择5个</div>
    <ul id="www_zzjs_ne">
      <li>选项一</li>
      <li>选项二</li>
      <li>选项三</li>
      <li>选项四</li>
      <li>选项五</li>
      <li>选项六</li>
      <li>选项七</li>
      <li>选项八</li>
      <li>选项九</li>
      <li>选项十</li>
      <li>选项十一</li>
      <li>选项十二</li>
      <li>选项十三</li>
      <li>选项十四</li>
      <li>选项十五</li>
    </ul>
  </div>
  <div id="rightbar">
    您已经选择了<strong id="num">0</strong>个！
    <ul id="rightul"></ul>
  </div>
</div>
<script type="text/javascript">
var maxNum = 5, Len=0, Nums=document.getElementById("num");
var li = document.getElementById('www_zzjs_ne').getElementsByTagName('li');
for(var i=li.length; i--; ){
  li[i].id = i;
  li[i].onclick = add;
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
function add(){
  if(++Len > maxNum){
    document.getElementById("_zzjs_net").innerHTML = "<strong style='color:#f00'>你已经选择够了！</strong>"
    --Len;
    return false;
  }
  var newli = document.createElement("li");
  newli.onclick = remove;
  newli.setAttribute("title", this.id);
  newli.appendChild(document.createTextNode(this.innerHTML));
  document.getElementById("rightul").appendChild(newli);
  this.style.display = "none";
  Nums.innerHTML = Len
}
function remove(){
  document.getElementById("_zzjs_net").innerHTML = "你最多可以选择五个！";
  var title = this.getAttribute("title");
  document.getElementById(title).style.display = "block";
  Nums.innerHTML = --Len;
  this.parentNode.removeChild(this);
}//欢迎来到站长特效网，我们的网址是www.zzjs.net， 很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</body>
</html>

关于左右列表框内容点击切换效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010091564716.shtml方便下次再访问哦。

·上一篇： 仿开心网好友印象评价效果
·下一篇： 检测QQ是否在线js代码

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

左右列表框内容点击切换效果

文章分类LIST >>返回首页

最新游戏

最新新闻