ludongping86
稀娌滹堍
采纳率50%
2021-04-12 00:10

请教:帮忙改个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条回答

  • weixin_44058725 雨生百谷,方为谷雨 25天前

    我看了一下代码没问题,只是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>
    点赞 1 评论 复制链接分享

相关推荐