Я пытаюсь добиться вкладок в реакции. Это то, за чем я следил https://bootsnipp.com/snippets/K0ZmK
Это моя index.html разметка для добавления jQuery и bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Styles -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>Online Shipping Management</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
Это мой Profile.js код:
import React from 'react';
export const Profile = () => {
return (
<>
<div class='container emp-profile'>
<form method='post'>
<div class='row'>
<div class='col-md-4'>
<div class='profile-img'>
<img
src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS52y5aInsxSm31CvHOFHWujqUx_wWTS9iM6s7BAm21oEN_RiGoog'
alt=''
/>
<div class='file btn btn-lg btn-primary'>
Change Photo
<input type='file' name='file' />
</div>
</div>
</div>
<div class='col-md-6'>
<div class='profile-head'>
<h5>Kshiti Ghelani</h5>
<h6>Web Developer and Designer</h6>
<p class='proile-rating'>
RANKINGS : <span>8/10</span>
</p>
<ul class='nav nav-tabs' id='myTab' role='tablist'>
<li class='nav-item'>
<a
class='nav-link active'
id='home-tab'
data-toggle='tab'
href='#home'
role='tab'
aria-controls='home'
aria-selected='true'
>
About
</a>
</li>
<li class='nav-item'>
<a
class='nav-link'
id='profile-tab'
data-toggle='tab'
href='#profile'
role='tab'
aria-controls='profile'
aria-selected='false'
>
Timeline
</a>
</li>
</ul>
</div>
</div>
<div class='col-md-2'>
<input
type='submit'
class='profile-edit-btn'
name='btnAddMore'
value='Edit Profile'
/>
</div>
</div>
<div class='row'>
<div class='col-md-4'>
<div class='profile-work'>
<p>WORK LINK</p>
<a href='#!'>Website Link</a>
<br />
<a href='#!'>Bootsnipp Profile</a>
<br />
<a href='#!'>Bootply Profile</a>
<p>SKILLS</p>
<a href='#!'>Web Designer</a>
<br />
<a href='#!'>Web Developer</a>
<br />
<a href='#!'>WordPress</a>
<br />
<a href='#!'>WooCommerce</a>
<br />
<a href='#!'>PHP, .Net</a>
<br />
</div>
</div>
<div class='col-md-8'>
<div class='tab-content profile-tab' id='myTabContent'>
<div
class='tab-pane fade show active'
id='home'
role='tabpanel'
aria-labelledby='home-tab'
>
<div class='row'>
<div class='col-md-6'>
<label>User Id</label>
</div>
<div class='col-md-6'>
<p>Kshiti123</p>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<label>Name</label>
</div>
<div class='col-md-6'>
<p>Kshiti Ghelani</p>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<label>Email</label>
</div>
<div class='col-md-6'>
<p>kshitighelani@gmail.com</p>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<label>Phone</label>
</div>
<div class='col-md-6'>
<p>123 456 7890</p>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<label>Profession</label>
</div>
<div class='col-md-6'>
<p>Web Developer and Designer</p>
</div>
</div>
</div>
<div
class='tab-pane fade'
id='profile'
role='tabpanel'
aria-labelledby='profile-tab'
>
<div class='row'>
<div class='col-md-6'>
<label>Experience</label>
</div>
<div class='col-md-6'>
<p>Expert</p>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<label>Hourly Rate</label>
</div>
<div class='col-md-6'>
<p>10$/hr</p>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<label>Total Projects</label>
</div>
<div class='col-md-6'>
<p>230</p>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<label>English Level</label>
</div>
<div class='col-md-6'>
<p>Expert</p>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<label>Availability</label>
</div>
<div class='col-md-6'>
<p>6 months</p>
</div>
</div>
<div class='row'>
<div class='col-md-12'>
<label>Your Bio</label>
<br />
<p>Your detail description</p>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</>
);
};
export default Profile;
Это мой App.css:
/* Profile */
.emp-profile {
padding: 3%;
margin-top: 3%;
margin-bottom: 3%;
border-radius: 0.5rem;
background: #fff;
}
.profile-img {
text-align: center;
}
.profile-img img {
width: 70%;
height: 100%;
}
.profile-img .file {
position: relative;
overflow: hidden;
margin-top: -20%;
width: 70%;
border: none;
border-radius: 0;
font-size: 15px;
background: #212529b8;
}
.profile-img .file input {
position: absolute;
opacity: 0;
right: 0;
top: 0;
}
.profile-head h5 {
color: #333;
}
.profile-head h6 {
color: #0062cc;
}
.profile-edit-btn {
border: none;
border-radius: 1.5rem;
width: 70%;
padding: 2%;
font-weight: 600;
color: #6c757d;
cursor: pointer;
}
.proile-rating {
font-size: 12px;
color: #818182;
margin-top: 5%;
}
.proile-rating span {
color: #495057;
font-size: 15px;
font-weight: 600;
}
.profile-head .nav-tabs {
margin-bottom: 5%;
}
.profile-head .nav-tabs .nav-link {
font-weight: 600;
border: none;
}
.profile-head .nav-tabs .nav-link.active {
border: none;
border-bottom: 2px solid #0062cc;
}
.profile-work {
padding: 14%;
margin-top: -15%;
}
.profile-work p {
font-size: 12px;
color: #818182;
font-weight: 600;
margin-top: 10%;
}
.profile-work a {
text-decoration: none;
color: #495057;
font-weight: 600;
font-size: 14px;
}
.profile-work ul {
list-style: none;
}
.profile-tab label {
font-weight: 600;
}
.profile-tab p {
font-weight: 600;
color: #0062cc;
}
/* End Profile */
А вот так он выглядит на моей странице:
введите описание изображения здесь
Каждый раз, когда я переключаю вкладки, текст не меняется. Я тоже пробовал исследовать, но ничего не работает. Заранее спасибо.