react使用tab标签页的方法，以及jquery方法

最新推荐文章于 2024-07-01 10:50:07 发布

meiziweixun

最新推荐文章于 2024-07-01 10:50:07 发布

阅读量808

点赞数 1

文章标签：标签页的实现 React jQuery

本文链接：https://blog.csdn.net/meiziweixun/article/details/101423430

版权

这里写自定义目录标题

react使用tab标签页的方法，以及jquery方法

react使用tab标签页的方法，以及jquery方法

react写法

以下是本人对应tab标签页的react方法的看法

import React, { Component, Fragment } from 'react';

{/*
B1,B2,B3四个组件，之所以设置3个，因为有的标签页的内容完全不同，
例如一个是个人信息，一个是活动列表，一个是信息管理，3个页面排版完全不同，则需要加载不同的组件
如果3个标签页内容相似，同为不同类目下的产品，比如分别显示上海、杭州、广州地区的民宿内容，排版相似，
只需要向同一个组件传入不同的数据即可
*/}

const B1 = () =>(
    <div>
        我是内容1
    </div>
)

const B2 = () =>(
    <div>
        我是内容2
    </div>
)

const B3 = () =>(
    <div>
        我是内容3
    </div>
)

class Tabs extends Component {
    constructor(props) {
        super(props);
        this.state = { 
           indexa:0
         };
    }

    handleClick = (index) => { 
       this.setState({
           indexa:index
       })
    };

render() {
    const titles = ["个人信息","活动信息","信息管理"] 
    //a为3个标签页的标题
    const contents = [<B1/>,<B2/>,<B3/>]
    const style1 = {    width:"100px",
                        height:"40px",
                        border:"0",
                        margin:"0 5px",
                        backgroundColor:"green" }
    const style2 = {    width:"100px",
                        height:"40px",
                        border:"0",
                        margin:"0 5px" }     
    // style1为点击按钮之后的样式，style2为未点击之后，即tab标签页选中的则style为style1                 
return (
    <Fragment>
        <div style = {{ marginTop:"30px"}}>
            {
                titles.map( (item,index) => (
                    <button 
                        onClick = { this.handleClick.bind(this,index) }
                        key = { index }
                        style = { this.state.indexa ===index? style1 : style2}>
                            { item }
                    </button>
                ))
            }
        </div>
        
        <div style = {{ marginTop:"15px",padding:"0 30px"}}>
            
            {/* 选出与button的索引值相同的内容，即是对应的标签的内容，
                用索引值取出相对应的组件*/}
            { contents[this.state.indexa] } 

        </div>
    </Fragment>

);
}
}

export default Tabs ;

jQuery方法

以下是jQuery写标签页的方法总结

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
      $(function(){
      //点击按钮之后，点击的按钮颜色会改变，其余的则不变，同时对应的div会运用对应显示样式
        $('#tab button').click(function(){
        //得到点击按钮的索引值，为该按钮增加选中后的按钮样式，其余未选中的则去掉样式
          $(this).addClass('current').siblings().removeClass('current');
        //选出与所按按钮索引值相同的div，为其增加样式，其余的则删除选中样式  
          $('.content div').eq($(this).index()).addClass('active').siblings().removeClass('active');
        })     
      })
    </script>
    <style>
      .tab button{
        border: 0;
        width: 100px;
        height: 40px;
      }
      
      .current{
        background-color: aqua;
      }
      
      .content div{
        margin: 20px auto;
        height: 200px;
        display: none;
        background-color: aqua;
      }
      
      .content .active{
        display: block;
      }
      
    </style>
	</head>
	<body>
    
    <div class = "tab">
      <button class="current">个人信息</button>
      <button>活动信息</button>
      <button>信息管理</button>
    </div>
    
    <div class="content"> 
      <div class="active">个人信息的内容</div>
      <div>活动信息的内容</div>
      <div>信息管理的内容</div>
    </div>

	</body>
</html>