2 lq lq314 lq_lq314 于 2017.01.04 15:29 提问

如何用按钮控制tab选项卡的切换

图片说明

tab选项卡本身可以自己切换,但是希望同时也能用button按钮进行切换,怎么做到呢?

6个回答

showbo
showbo   Ds   Rxr 2017.01.04 15:52

你地址里面不是有实例,不过看不懂什么语言。。。不是js的,api也没找到。。你这种功能tab来实现就行了吧。。如easyui的tab可以调用select选中对应的tab

 import { Steps, Button, message } from 'antd';
const Step = Steps.Step;

const steps = [{
  title: 'First',
  content: 'First-content',
}, {
  title: 'Second',
  content: 'Second-content',
}, {
  title: 'Last',
  content: 'Last-content',
}];

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 0,
    };
  }
  next() {
    const current = this.state.current + 1;
    this.setState({ current });
  }
  prev() {
    const current = this.state.current - 1;
    this.setState({ current });
  }
  render() {
    const { current } = this.state;
    return (
      <div>
        <Steps current={current}>
          {steps.map(item => <Step key={item.title} title={item.title} />)}
        </Steps>
        <div className="steps-content">{steps[this.state.current].content}</div>
        <div className="steps-action">
          {
            this.state.current < steps.length - 1
            &&
            <Button type="primary" onClick={() => this.next()}>Next</Button>
          }
          {
            this.state.current === steps.length - 1
            &&
            <Button type="primary" onClick={() => message.success('Processing complete!')}>Done</Button>
          }
          {
            this.state.current > 0
            &&
            <Button style={{ marginLeft: 8 }} type="ghost" onClick={() => this.prev()}>
              Previous
            </Button>
          }
        </div>
      </div>
    );
  }
}
lq_lq314
lq_lq314   2017.01.04 15:27

下一步是到第五步,不好意思

qq_33547043
qq_33547043   2017.01.04 15:39
qq_29594393
qq_29594393   Ds   Rxr 2017.01.04 15:42

看一下html 的关系 ,这些选项卡应该是同级的 ,
下一步
$("buttonId").click(function(){
$(this).parent("父级标签页").hide().next( tab 标签页).show()
})
上一步
$("buttonId").click(function(){
$(this).parent("父级标签页").hide().prev( tab 标签页).show()
})

sun1021873926
sun1021873926   Ds   Rxr 2017.01.04 19:07

“点击第三步”添加事件,然后在该事件中去点击“第三步”,即用jquery选中“第三步”Tab页,然后做.click()。

lq_lq314
lq_lq314   2017.01.05 14:15

已经解决了,谢谢大家!!!

qq_33547043
qq_33547043 怎么解决的
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
jquery实现选项卡切换
jquery 利用 index() 查找下标实现选项卡切换
MFC使用Tab Control(选项卡控件)方法
MFC中使用Tab Control和VB中的使用还是比较不同的,MFC中的Tab Control就是Tab对象关联了对话框来实现的(对话框的Style要设置为Child),实现还是比较简单的,那我们上代码。 1.建立一个MFC工程,在对话框中加入Tab Control控件,关联CTabControl变量m_tab 2.建立几个对话框(你的Tab Control想有几页就建立几个,因为一页是关联
tab标签(选项卡)切换实现
//导航栏单击变换内容 function tabSwitch(_this,num) { var tag = document.getElementById("nav9"); var number = tag.getElementsByTagName("a"); //获取导航栏元素个数(getElementsByTagName是返回元素素组) var divNum = do
使用js实现tab选项卡效果
这里提供了一种制作选项卡的思路。在制作过程中首先考虑的是html结构,元素如何摆放,此外通过这样的摆放,通过CSS样式是否可以达到我们所要的效果。最后通过js进行监听,当进行选项卡切换时,我们可以对所有内容进行隐藏,之后再对选中的内容进行显示以达到切换的效果。        效果如下:     点击“家居“可进行切换:        程序如下: 实践题 - 选
轻松控制EasyUI-Tab选项卡
【项目概要】     项目中前台页面用的是EasyUI样式,用户登录后,左侧是导航栏,点击导航栏下的内容,在页面右侧显示的是具体内容。界面如下图所示:          【需求说明】     目前项目组长已经实现点击左侧导航菜单下的某个选项,界面右侧出现对应的选项卡内容。而我需要完成的需求是当再次点击右侧已打开的选项卡内容,会回到对应的选项卡内容,而不是总停留在最后打开的一项。
easyUI切换tabs(选项卡)
在做项目时候遇到一个需求就是当我保存第一个tabs选项卡里面的数据之后,自动跳到第二个选项卡中, 查看easyui的API后发现使用select方法可以实现(select which 选择一个选项卡面板,'which'参数可以是选项卡面板的标题或者索引。) 页面js代码中在方法结束时执行 $("#addTab").tabs("select",1);
Axure实现Tab选项卡切换功能
Axure实现Tab选项卡切换功能 小技巧 上例的四个选项卡就是动态面板的四个状态,这几个状态有一些公共的内容,比如选项卡的四个按钮(即上例中的四张图片)和各个按钮相应的单击事件,所以为了高效省时,可以先做出一个选项卡的内容来,然后可以直接将这个选项卡的公共内容部分复制到其他选项卡中,这样也可以避免位置调整不佳而导致点击每个选项卡切换时会来回“跳动”(在Axure中从一处复制内容到另一处时,内容本身的属性、事件、坐标等性质均不变)。
layui弹出框Tab选项卡
最近做一个项目,使用LAYUI,在界面上Z弹出一个界面A,A上有TAB选项卡,分别为界面B、C;B界面上有一个列表,双击败列表行时,要把数据回写到界面Z; 界面A上有提交按钮,选中B界面上列表某一条数据,界面A上点提交时,同样回写数据到Z;实现:双击:B上实现双击方法,调用A上界面方法,再调用Z界面上方法; B界面上方法: function dbclick_select(row,index){ d...
【js基础】Tab选项卡切换效果实现
课程连接:http://www.imooc.com/learn/176 html部分<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="tab.css"> <script src="tab.js"></script> <title>Do
JQ实现——TAB选项卡切换登录界面
今天,分享一个简单实用的TAB选项卡切换登录界面。 主页部分 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;zh-CN&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=