优化商品添加表单js

思路

1、制作五个按钮

2、下面五个table

3、全部隐藏,点击则显示

4、点击第几个按钮就显示第几个table

具体操作

1、添加按钮

2、添加五个table并添加class隐藏后面四个

style="display:none"  ->隐藏

class="tab_table"  ->样式名,方便js操作

3、添加JS代码绑定点击事件【add.html的最下面】

/******切换代码******/
$("#tabbar-div p span").click(function(){
//点击的第几个按钮
var i = $(this).index();
//先隐藏所有的table
$(".tab_table").hide();
//显示第i个table
$(".tab_table").eq(i).show();
//先取消原按钮的选中状态
$(".tab-front").removeClass("tab-front").addClass("tab-back");
//设置当前按钮选中
$(this).removeClass("tab-back").addClass("tab-front");
});

  

PHP.TP框架下商品项目的优化4-优化商品添加表单js的更多相关文章

  1. DHTMLX 前端框架 建立你的一个应用程序 教程(八)-- 添加表单Form

    添加表单Form 我们下一步是在页面中添加一个表单,表格中的选中字段将会显示在表单中.提供一个提交按钮 可以对显示的数据进行修改提交. 添加表单到布局单元格中 1.在右侧布局中使用attachForm ...

  2. PHP.TP框架下商品项目的优化3-php封装下拉框函数

    php封装下拉框函数 因为在项目中会经常使用到下拉框,所以根据一个表中的数据制作下拉框函数,以便调用 //使用一个表的数据做下拉框函数 function buildSelect($tableName, ...

  3. 关于lnmp下 phalcon和tp框架下的nginx文件配置

    vim /etc/nginx/sites-available/default   进入修改目录 1.正常项目配置 server { listen 80 default_server; listen [ ...

  4. tp框架下,数据库和编辑器都是utf-8, 输出中文却还是乱码

    输出: array(2) { [0]=> array(4) { ["id"]=> string(1) "1" ["user"]= ...

  5. SpringMVC框架下Web项目的搭建与部署

    这篇文章已被废弃. 现在,Deolin使用Maven构建项目,而不是下载Jar文件,使用Jetty插件调试项目,而不是外部启动Tomcat. SpringMVC比起Servlet/JSP方便了太多 W ...

  6. 项目回顾1-图片上传-form表单还是base64-前端图片压缩

    第一个项目终于上线了,是一个叫亲青筹的公益众筹平台,微信端,电脑端还有后台界面大部分都是我完成的,几个月过来,感觉收获了很多,觉得要总结一下. 首先想到的是图片上传的问题.在通常表单数据都是ajax上 ...

  7. react 项目实战(四)组件化表单/表单控件 高阶组件

    高阶组件:formProvider 高阶组件就是返回组件的组件(函数) 为什么要通过一个组件去返回另一个组件? 使用高阶组件可以在不修改原组件代码的情况下,修改原组件的行为或增强功能. 我们现在已经有 ...

  8. 基于Struts2框架实现登录案例 之 使用Struts2标签库简化表单+继承ActionSupport完成输入交验

    一,使用Struts2标签库简化表单 在文章[基于Struts2框架实现登录案例]的基础上,通过使用Struts标签库可以简化登录页面login2.jsp <%@ page language=& ...

  9. 415 DOM 查找列表框、下拉菜单控件、对表格元素/表单控件进行增删改操作、创建元素并且复制节点与删除、 对表格操作、通用性和标准的事件监听方法(点击后弹窗效果以及去掉效果)

    DOM访问列表框.下拉菜单的常用属性: form.length.options.selectedindex.type       使用options[index]返回具体选项所对应的常用属性:defa ...

随机推荐

  1. int **a 和 int (*a)[]的区别

    关于理论知识隔壁们的教程说的很详细了我就不多赘述了.我这边主要贴一段代码来看看这两种东西使用上的区别到底在哪. #include <stdio.h> int main(int argc, ...

  2. Struts2_总结

    还未学习的内容,如果到时候要用到,再去学.1.Lamda 表达式(很复杂,很少用)2.验证框架(默认验证方法 validation.方法开始前验证.开始后验证)3.UI标签(用的不多)4.类型转换中的 ...

  3. "ssllabs" website and "testssl" website

    "https://www.ssllabs.com" could scan your server and give results about the weakness of yo ...

  4. IDEA中git的配置与使用

    IDEA中git的配置与使用 1.介绍 git是目前非常流行的版本管理管理软件,因其具有分布式特点,越来越受到企业的欢迎.IDEA作为一款优秀的开发软件,其内部也提供了对git的支持. 2.下载并安装 ...

  5. 从C++起步到MFC实战VC++软件工程师高端培训 视频保存在 播音员的网盘中

    从C++起步到MFC实战VC++软件工程师高端培训(服务器端开发方向)[共332课时]视频保存在 播音员的网盘中http://www.it1352.com/VideoTutorial/Details? ...

  6. POJ-2139 Six Degrees of Cowvin Bacon---Floyd

    题目链接: https://vjudge.net/problem/POJ-2139 题目大意: 给定一些牛的关系,他们之间的距离为1. 然后求当前这只牛到每只牛的最短路的和,除以 n - 1只牛的最大 ...

  7. Linux高性能server编程——定时器

    版权声明:本文为博主原创文章.未经博主允许不得转载. https://blog.csdn.net/walkerkalr/article/details/36869913  定时器 服务器程序通常管 ...

  8. 2019.03.13 ZJOI2019模拟赛 解题报告

    得分: \(55+12+10=77\)(\(T1\)误认为有可二分性,\(T2\)不小心把\(n\)开了\(char\),\(T3\)直接\(puts("0")\)水\(10\)分 ...

  9. VERITA Netbackup日常巡检详细说明

    VERITA备份日常监控 一. 相关检查方法.命令 1.1 启动NBU的图形管理界面: /usr/openv/netbackup/bin/jnbSA & 1.2字符界面命令: 1.2.1cat ...

  10. [论文理解]关于ResNet的进一步理解

    [论文理解]关于ResNet的理解 这两天回忆起resnet,感觉残差结构还是不怎么理解(可能当时理解了,时间长了忘了吧),重新梳理一下两点,关于resnet结构的思考. 要解决什么问题 论文的一大贡 ...