稀娌滹堍 2021-04-12 00:10 采纳率: 50%
浏览 40
已采纳

请教：帮忙改个Tab选项卡代码

<!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=utf-8" />
  <title>添加商品</title>
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
      font-family: "Microsoft YaHei";
      font-size: 14px;
    }
    #hides{display: none;}
    a {text-decoration: none;}
    li { list-style-type: none;}
    .border-bottom{ border-bottom:none;}
    form .form-group:last-child{ padding-bottom:0;}
    
    .field .w50 { width:25%; float:left;}
    .tab-div { background: #fff;border: 1px solid #ddd;margin: 0 0 10px 0;padding: 1px;}
    #tabbar-div { background: #fcfcfc; padding-left: 10px; padding-top: 1px;}
    #tabbar-div p { margin: 2px 0 0 0;}
    #title { border-bottom:1px solid #dfdfdf; border-radius:4px; background-color: #fcfcfc; line-height:35px; font-size:16px; font-weight:bold; color:#FF9900;overflow: hidden;}
    #title span{ text-align:center;}
    #title span.on{ border:1px solid #FF9900; border-radius:4px; text-align:center;}
    #title span:hover{ background: #FF9900; color: #FFF; cursor: pointer;}

    #content {margin-top: 10px;}
    #content li{overflow: hidden;display: none;background-color: #fcfcfc;}
    #content li .form-group{width: 90%;margin-right: 14px;float: left;}
    #content li .form-group .label{width: 20%;margin-right: 14px;float: left;text-align: right;vertical-align:middle;line-height:35px;margin-right:5px;}
    #content li .form-group .field{ width: 70%;float: left;}
    #content li .form-group .field .file{ background:#FFF; border:0px;}
    #content li .form-group .field input[type=radio]{ vertical-align:middle; line-height:35px; margin-right:5px;}
    #content li .form-group .field input[type=checkbox]{ vertical-align:middle;border:0px;}
    #content li .form-group .field input[type=file]{float:left;border:0px;}
    #content li .form-group .field textarea{float:left;}
    #content li .form-group .field .tips{ float:left; padding-left:10px; color:#888; line-height:42px;}
    #content .form-group{width: 30%;margin-right: 14px;float: left;text-align: right;vertical-align:middle;line-height:35px;margin-right:5px;}
    #title .on{background-color:#FFF;color: #FF9900;}
    #content .show{ display: block;}
  </style>
  <script type="text/javascript">
    var title=document.getElementById('title');
    var content=document.getElementById('content');
    var spans=title.getElementsByTagName('span');
    var lis=content.getElementsByTagName('li');
    for (var i = 0; i < spans.length; i++) {
      spans[i].index=i;
      spans[i].onclick=function(){
        for (var j = 0; j < spans.length; j++) {
          spans[j].className='';
          lis[j].className='';
        }
        this.className='on';
        lis[this.index].className='show';
      }
    }
  </script>
</head>

<body>
<div class="panel admin-panel margin-top">
  <div class="tab-div">
    <div id="tabbar-div">
      <p id="title">
        <span class="on">通用信息</span>
        <span>详细描述</span>
        <span>其他信息</span>
      </p>
      <ul id="content" class="body-content">
        <!-- 通用信息 -->
        <li class="show" width="90%" align="center">
          <div class="form-group">
            <div class="label">
              <label>商品名称：</label>
            </div>
            <div class="field">
              <input type="text" class="input w50" name="cat_name" />
              <div class="tips"></div>
            </div>
          </div>
          <div class="form-group">
            <div class="label">
              <label>商品货号：</label>
            </div>
            <div class="field">
              <input type="text" class="input w50" name="goods_sn" value="" />
              <div class="tips">如果您不输入商品货号，系统将自动生成一个唯一的货号。</div>
            </div>
          </div>
          <div class="form-group">
            <div class="label">
              <label>商品分类：</label>
            </div>
            <div class="field">
              <select name="cat_id" class="input w50">
                <option value="0">顶级分类</option>
                <?php foreach($catlist as $v) { ?>
                  <option value="<?php echo $v['cat_id']; ?>"><?php echo str_repeat('&nbsp;&nbsp;',$v['lev']),$v['cat_name']; ?></option>
                <?php } ?>
              </select>
              <div class="tips">不选择上级分类默认为一级分类</div>
            </div>
          </div>
          <div class="form-group">
            <div class="label">
              <label>本店售价：</label>
            </div>
            <div class="field">
              <input type="text" class="input w50" name="shop_price" value="" />
              <div class="tips"></div>
            </div>
          </div>
          <div class="form-group">
            <div class="label">
              <label>市场售价：</label>
            </div>
            <div class="field">
              <input type="text" class="input w50" name="market_price" value="" />
              <div class="tips"></div>
            </div>
          </div>
          <div class="form-group">
            <div class="label">
              <label>上传商品图片：</label>
            </div>
            <div class="field">
              <input type="file" name="ori_img" value="" />
              <div class="tips"></div>
            </div>
          </div>
        </li>
        <!-- 详细描述 -->
        <li width="90%">
          <div class="form-group">
            <div class="label">
              <label></label>
            </div>
            <div class="field">
              <textarea id="goods_desc" name="goods_desc"></textarea>
            </div>
            <div class="tips"></div>
          </div>
        </li>
        <!-- 其他信息 -->
        <li width="90%" align="center">
          <div class="form-group">
            <div class="label">
              <label>商品重量：</label>
            </div>
            <div class="field">
              <input type="text" class="input w50" name="goods_weight" value="" />
              <div class="tips">
                <select name="weight_unit" class="input">
                  <option value="1" selected>千克</option>
                  <option value="0.001">克</option>
                </select>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="label">
              <label>商品库存数量：</label>
            </div>
            <div class="field">
              <input type="text" class="input w50" name="goods_number" value="" />
              <div class="tips"></div>
            </div>
          </div>
          <div class="form-group">
            <div class="label">
              <label>设置推荐：</label>
            </div>
            <div class="field w50">
              精品：<input type="checkbox" name="is_best" value="精品" />
              新品：<input type="checkbox" name="is_new" value="新品" />
              热销：<input type="checkbox" name="is_hot" value="热销" />
            </div>
            <div class="tips"></div>
          </div>
          <div class="form-group">
            <div class="label">
              <label>上架：</label>
            </div>
            <div class="field w50">
              <input type="checkbox" name="is_on_sale" value="1" checked="checked" />
            </div>
            <div class="tips">打勾表示允许销售，否则不允许销售。</div>
          </div>
          <div class="form-group">
            <div class="label">
              <label>商品关键字：</label>
            </div>
            <div class="field">
              <input type="text" class="input w50" name="keywords" />
            </div>
            <div class="tips">用空格分隔。</div>
          </div>
          <div class="form-group">
            <div class="label">
              <label>商品简单描述：</label>
            </div>
            <div class="field">
              <div><textarea class="input w50" name="goods_brief" cols="40" rows="5"></textarea></div>
            </div>
            <div class="tips"></div>
          </div>
          <div class="form-group">
            <div class="label">
              <label>商家备注：</label>
            </div>
            <div class="field">
              <textarea class="input w50" name="seller_note" cols="40" rows="5"></textarea>
            </div>
            <div class="tips">仅供商家自己看的信息</div>
          </div>
        </li>
        <div class="form-group">
          <div class="label">
            <label></label>
          </div>
          <div class="field">
            <button class="button bg-main icon-check-square-o" type="submit"> 提交</button>
            <button class="button bg-main icon-check-square-o" type="reset"> 重置</button>
          </div>
        </div>
        <input type="hidden" name="act" value="insert" />
        <input type="hidden" name="old_cat_name" value="" />
        <input type="hidden" name="cat_id" value="<?php echo $v['cat_id']; ?>" />
      </ul>
    </div>
  </div>
</div>
<script type="text/javascript" src="../../lib/ueditor/utf8-php/ueditor.config.js"></script>
<script type="text/javascript" src="../../lib/ueditor/utf8-php/ueditor.all.min.js"></script>
<script type="text/javascript">
  var myed = new UE.ui.Editor({initialFrameWidth:800,initialFrameHeight:260,initialContent:''});
  myed.render("goods_desc");
</script>
</body>

</html>

详细描述 和 其他信息 点击没反应，点击切换不过来

  • 写回答

1条回答 默认 最新

  • 崽崽的谷雨 2021-04-12 09:04
    关注

    我看了一下代码没问题，只是script顺序放错了，你原来放在body上面，dom没有创建就获取id为title的元素，结果跟定获取不到（值为null）。吧script放到body下就行了 

    <!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=utf-8" />
  <title>添加商品</title>
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
      font-family: "Microsoft YaHei";
      font-size: 14px;
    }
    #hides{display: none;}
    a {text-decoration: none;}
    li { list-style-type: none;}
    .border-bottom{ border-bottom:none;}
    form .form-group:last-child{ padding-bottom:0;}
    .field .w50 { width:25%; float:left;}
    .tab-div { background: #fff;border: 1px solid #ddd;margin: 0 0 10px 0;padding: 1px;}
    #tabbar-div { background: #fcfcfc; padding-left: 10px; padding-top: 1px;}
    #tabbar-div p { margin: 2px 0 0 0;}
    #title { border-bottom:1px solid #dfdfdf; border-radius:4px; background-color: #fcfcfc; line-height:35px; font-size:16px; font-weight:bold; color:#FF9900;overflow: hidden;}
    #title span{ text-align:center;}
    #title span.on{ border:1px solid #FF9900; border-radius:4px; text-align:center;}
    #title span:hover{ background: #FF9900; color: #FFF; cursor: pointer;}
    #content {margin-top: 10px;}
    #content li{overflow: hidden;display: none;background-color: #fcfcfc;}
    #content li .form-group{width: 90%;margin-right: 14px;float: left;}
    #content li .form-group .label{width: 20%;margin-right: 14px;float: left;text-align: right;vertical-align:middle;line-height:35px;margin-right:5px;}
    #content li .form-group .field{ width: 70%;float: left;}
    #content li .form-group .field .file{ background:#FFF; border:0px;}
    #content li .form-group .field input[type=radio]{ vertical-align:middle; line-height:35px; margin-right:5px;}
    #content li .form-group .field input[type=checkbox]{ vertical-align:middle;border:0px;}
    #content li .form-group .field input[type=file]{float:left;border:0px;}
    #content li .form-group .field textarea{float:left;}
    #content li .form-group .field .tips{ float:left; padding-left:10px; color:#888; line-height:42px;}
    #content .form-group{width: 30%;margin-right: 14px;float: left;text-align: right;vertical-align:middle;line-height:35px;margin-right:5px;}
    #title .on{background-color:#FFF;color: #FF9900;}
    #content .show{ display: block;}
  </style>
</head>
<body>
<div class="panel admin-panel margin-top">
  <div class="tab-div">
    <div id="tabbar-div">
      <p id="title">
        <span class="on">通用信息</span>
        <span>详细描述</span>
        <span>其他信息</span>
      </p>
      <ul id="content" class="body-content">
        <!-- 通用信息 -->
        <li class="show" width="90%" align="center">
          <div class="form-group">
            <div class="label">
              <label>商品名称：</label>
            </div>
            <div class="field">
              <input type="text" class="input w50" name="cat_name" />
              <div class="tips"></div>
            </div>
          </div>
          <div class="form-group">
            <div class="label">
              <label>商品货号：</label>
            </div>
            <div class="field">
              <input type="text" class="input w50" name="goods_sn" value="" />
              <div class="tips">如果您不输入商品货号，系统将自动生成一个唯一的货号。</div>
            </div>
          </div>
          <div class="form-group">
            <div class="label">
              <label>商品分类：</label>
            </div>
            <div class="field">
              <select name="cat_id" class="input w50">
                <option value="0">顶级分类</option>
                <?php foreach($catlist as $v) { ?>
                  <option value="<?php echo $v['cat_id']; ?>"><?php echo str_repeat('&nbsp;&nbsp;',$v['lev']),$v['cat_name']; ?></option>
                <?php } ?>
              </select>
              <div class="tips">不选择上级分类默认为一级分类</div>
            </div>
          </div>
          <div class="form-group">
            <div class="label">
              <label>本店售价：</label>
            </div>
            <div class="field">
              <input type="text" class="input w50" name="shop_price" value="" />
              <div class="tips"></div>
            </div>
          </div>
          <div class="form-group">
            <div class="label">
              <label>市场售价：</label>
            </div>
            <div class="field">
              <input type="text" class="input w50" name="market_price" value="" />
              <div class="tips"></div>
            </div>
          </div>
          <div class="form-group">
            <div class="label">
              <label>上传商品图片：</label>
            </div>
            <div class="field">
              <input type="file" name="ori_img" value="" />
              <div class="tips"></div>
            </div>
          </div>
        </li>
        <!-- 详细描述 -->
        <li width="90%">
          <div class="form-group">
            <div class="label">
              <label></label>
            </div>
            <div class="field">
              <textarea id="goods_desc" name="goods_desc"></textarea>
            </div>
            <div class="tips"></div>
          </div>
        </li>
        <!-- 其他信息 -->
        <li width="90%" align="center">
          <div class="form-group">
            <div class="label">
              <label>商品重量：</label>
            </div>
            <div class="field">
              <input type="text" class="input w50" name="goods_weight" value="" />
              <div class="tips">
                <select name="weight_unit" class="input">
                  <option value="1" selected>千克</option>
                  <option value="0.001">克</option>
                </select>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="label">
              <label>商品库存数量：</label>
            </div>
            <div class="field">
              <input type="text" class="input w50" name="goods_number" value="" />
              <div class="tips"></div>
            </div>
          </div>
          <div class="form-group">
            <div class="label">
              <label>设置推荐：</label>
            </div>
            <div class="field w50">
              精品：<input type="checkbox" name="is_best" value="精品" />
              新品：<input type="checkbox" name="is_new" value="新品" />
              热销：<input type="checkbox" name="is_hot" value="热销" />
            </div>
            <div class="tips"></div>
          </div>
          <div class="form-group">
            <div class="label">
              <label>上架：</label>
            </div>
            <div class="field w50">
              <input type="checkbox" name="is_on_sale" value="1" checked="checked" />
            </div>
            <div class="tips">打勾表示允许销售，否则不允许销售。</div>
          </div>
          <div class="form-group">
            <div class="label">
              <label>商品关键字：</label>
            </div>
            <div class="field">
              <input type="text" class="input w50" name="keywords" />
            </div>
            <div class="tips">用空格分隔。</div>
          </div>
          <div class="form-group">
            <div class="label">
              <label>商品简单描述：</label>
            </div>
            <div class="field">
              <div><textarea class="input w50" name="goods_brief" cols="40" rows="5"></textarea></div>
            </div>
            <div class="tips"></div>
          </div>
          <div class="form-group">
            <div class="label">
              <label>商家备注：</label>
            </div>
            <div class="field">
              <textarea class="input w50" name="seller_note" cols="40" rows="5"></textarea>
            </div>
            <div class="tips">仅供商家自己看的信息</div>
          </div>
        </li>
        <div class="form-group">
          <div class="label">
            <label></label>
          </div>
          <div class="field">
            <button class="button bg-main icon-check-square-o" type="submit"> 提交</button>
            <button class="button bg-main icon-check-square-o" type="reset"> 重置</button>
          </div>
        </div>
        <input type="hidden" name="act" value="insert" />
        <input type="hidden" name="old_cat_name" value="" />
        <input type="hidden" name="cat_id" value="<?php echo $v['cat_id']; ?>" />
      </ul>
    </div>
  </div>
</div>
<script type="text/javascript" src="../../lib/ueditor/utf8-php/ueditor.config.js"></script>
<script type="text/javascript" src="../../lib/ueditor/utf8-php/ueditor.all.min.js"></script>
<script type="text/javascript">
  var myed = new UE.ui.Editor({initialFrameWidth:800,initialFrameHeight:260,initialContent:''});
  myed.render("goods_desc");
</script>
</body>
<script type="text/javascript">
    var title=document.getElementById('title');
    console.log(title,"99")
    var content=document.getElementById('content');
    var spans=title.getElementsByTagName('span');
    var lis=content.getElementsByTagName('li');
    console.log(spans,"00")
    for (var i = 0; i < spans.length; i++) {
      spans[i].index=i;
      spans[i].onclick=function(){
        for (var j = 0; j < spans.length; j++) {
          spans[j].className='';
          lis[j].className='';
        }
        this.className='on';
        lis[this.index].className='show';
      }
    }
  </script>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 做个有关计算的小程序
  • ¥15 MPI读取tif文件无法正常给各进程分配路径
  • ¥15 如何用MATLAB实现以下三个公式（有相互嵌套）
  • ¥30 关于#算法#的问题：运用EViews第九版本进行一系列计量经济学的时间数列数据回归分析预测问题 求各位帮我解答一下
  • ¥15 setInterval 页面闪烁，怎么解决
  • ¥15 如何让企业微信机器人实现消息汇总整合
  • ¥50 关于#ui#的问题：做yolov8的ui界面出现的问题
  • ¥15 如何用Python爬取各高校教师公开的教育和工作经历
  • ¥15 TLE9879QXA40 电机驱动
  • ¥20 对于工程问题的非线性数学模型进行线性化