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 怎么解决的
11 个月之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!