小贝子编程

页面内容只出现一半，从锚标记和同步图标动画移动文本



我在youtube上学习了如何使用html/css/javascript创建选项卡的教程，但我面临一些问题。注意:我不是计算机科学专业的学生，只学习编码，所以我使用的术语可能不准确，这些问题可能是非常初级的。

  1. 只有一半的正文内容是可见的，其余部分被切断，这样你只能看到句子/字母的顶部部分，我附上的图像也是如此。是因为位置绝对还是其他问题?

  2. 如何将文本从"通过Facebook/Whatsapp/电子邮件订购"的锚标记中移动出来?上升了一点点?我把图标放大了2倍，但结果文本似乎与各自的图标不太对齐。

  3. 当我将光标悬停在btn-box上时，选项卡上的所有其他按钮同时动画。据说，动画应该只出现在我悬停的地方，而不是应用在所有其他btns。

希望收到任何回复来帮助我解决这些问题。谢谢你。

*{
padding: 0;
margin: 0;
font-family: poppins;

}
.hero{
width: 80%;
height: 450px;
position: relative;
margin: 100px auto;
overflow: hidden;
}
.btn-box{
display: flex;
border-bottom: 1px solid #ccc;
}
.btn-box button{
background: transparent;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
margin-right: 50px;
font-size: 20px;
font-weight: bold;
}
.btn-box .fa{
margin-right: 20px;
}
.btn-box:hover .fa{
color: #ff7846;
}
.content-right img{
width: 350px;
}
.content{
display: flex;
justify-content: center;
align-items: center;
margin: 5% auto;
position: absolute;
transform: translateX(100%);
transition: 0.3s;
}
.content-left{
flex-basis: 50%;
}
.content-left p{
font-size: 15px;
padding: 30px 0;
}
.content-right{
flex-basis: 50%;
text-align: center;
}
#content1{
transform: translateX(0px);
}
#btn1{
color: #ff7846;
}
/*----PRODUCT DETAILS CONATCT ICON----*/
.content-left a{
width: 100%;
display: block;
padding: 10px 5px;
border-radius: 20px;
text-decoration: none;
background-color: #ff7846;
color: #fff;
text-align: center;
float: left;
}
#contact-ws{
width: 100%;
display: block;
padding: 8px 5px;
border-radius: 20px;
text-decoration: none;
background-color: #25D366;
color: #fff;
float: left;
margin-top: 10px;
text-align: center;
}
#contact-fb{
background-color: #0078ff;
color: #fff;
float: left;
margin-top: 10px;
text-align: center;
width: 100%;
display: block;
padding: 8px 5px;
border-radius: 20px;
text-decoration: none;
}
.content-left i{
margin: 10px;
}
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="faqstyle.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous"> 
<!--Font Awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<!--IONICON-->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>


<title>Product details</title>
</head>
<body>
<div class="hero">
<div class="btn-box">
<button id="btn1" onclick="openHTML()"><i class="fa fa-info-circle"></i>Description</button>
<button id="btn2"onclick="openCSS()"><i class="fa fa-question-circle"></i>Specifications</button>
<button id="btn3"onclick="openJS()"><i class="fa fa-shopping-cart"></i>Place Order</button>
</div>
<div class="content" id="content1">
<div class="content-left">
<h1>How does it work?</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis mollitia suscipit temporibus incidunt consequatur autem eveniet tenetur consequuntur labore
atque odit optio dolore ipsa maxime, impedit laudantium dolorem illo unde! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum error, voluptates distinctio natus culpa vel, vitae eius dolore pariatur possimus beatae
commodi! Odit, quas commodi molestias placeat rerum harum recusandae!</p>
</div>
<div class="content-right">
<img src="#">
</div>
</div>

<div class="content" id="content2">
<div class="content-left">
<h1>Extra details</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas nisi voluptas aut vero, commodi eum saepe temporibus expedita
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae blanditiis culpa ad, enim nisi velit perspiciatis aspernatur. Consequuntur neque asperiores ipsa voluptate alias labore ratione enim ipsum ut debitis? Officia.
quae, ab quo excepturi facere animi nulla quis labore deleniti totam nobis?</p>
</div>
<div class="content-right">
<img src="#">
</div>
</div>

<div class="content" id="content3">
<div class="content-left">
<h1>Get yours now!</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis mollitia suscipit temporibus incidunt consequatur autem eveniet tenetur consequuntur labore
atque odit optio dolore ipsa maxime, impedit laudantium dolorem illo unde!</p>
<a href="#"><i class="fas fa-envelope fa-2x"></i>Order via email</a>
<a href="#" id="contact-ws"><i class="fab fa-whatsapp fa-2x"></i>Order via Whatsapp</a>
<a href="#" id="contact-fb"><i class="fab fa-facebook-messenger fa-2x"></i>Order via Facebook Messenger-</a>
</div>
<div class="content-right">
<img src="#">
</div>
</div>
</div>
<script>
var content1 = document.getElementById("content1");
var content1 = document.getElementById("content2");
var content1 = document.getElementById("content1");
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
function openHTML(){
content1.style.transform = "translateX(0)";
content2.style.transform = "translateX(100%)";
content3.style.transform = "translateX(100%)";
btn1.style.color = "#ff7846"
btn2.style.color = "#000"
btn3.style.color = "#000"
content1.style.transitionDelay = "0.3s"
content2.style.transitionDelay = "0s"
content3.style.transitionDelay = "0s"
}
function openCSS(){
content1.style.transform = "translateX(100%)";
content2.style.transform = "translateX(0)";
content3.style.transform = "translateX(100%)";
btn2.style.color = "#ff7846"
btn1.style.color = "#000"
btn3.style.color = "#000"
content1.style.transitionDelay = "0s"
content2.style.transitionDelay = "0.3s"
content3.style.transitionDelay = "0s"
}  function openJS(){
content1.style.transform = "translateX(100%)";
content2.style.transform = "translateX(100%)";
content3.style.transform = "translateX(0)";
btn3.style.color = "#ff7846"
btn2.style.color = "#000"
btn1.style.color = "#000"
content1.style.transitionDelay = "0s"
content2.style.transitionDelay = "0s"
content3.style.transitionDelay = "0.3s"
}
</script>
</body>
</html>

用overflow-x: clip;代替overflow: hidden;

.hero {
width: 80%;
height: 450px;
position: relative;
margin: 100px auto;
overflow-x: clip;
}

下面是代码片段

var content1 = document.getElementById("content1");
var content1 = document.getElementById("content2");
var content1 = document.getElementById("content1");
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
function openHTML(){
content1.style.transform = "translateX(0)";
content2.style.transform = "translateX(100%)";
content3.style.transform = "translateX(100%)";
btn1.style.color = "#ff7846"
btn2.style.color = "#000"
btn3.style.color = "#000"
content1.style.transitionDelay = "0.3s"
content2.style.transitionDelay = "0s"
content3.style.transitionDelay = "0s"
}
function openCSS(){
content1.style.transform = "translateX(100%)";
content2.style.transform = "translateX(0)";
content3.style.transform = "translateX(100%)";
btn2.style.color = "#ff7846"
btn1.style.color = "#000"
btn3.style.color = "#000"
content1.style.transitionDelay = "0s"
content2.style.transitionDelay = "0.3s"
content3.style.transitionDelay = "0s"
}  function openJS(){
content1.style.transform = "translateX(100%)";
content2.style.transform = "translateX(100%)";
content3.style.transform = "translateX(0)";
btn3.style.color = "#ff7846"
btn2.style.color = "#000"
btn1.style.color = "#000"
content1.style.transitionDelay = "0s"
content2.style.transitionDelay = "0s"
content3.style.transitionDelay = "0.3s"
}
*{
padding: 0;
margin: 0;
font-family: poppins;

}
.hero{
width: 80%;
height: 450px;
position: relative;
margin: 100px auto;
overflow: hidden;
}
.btn-box{
display: flex;
border-bottom: 1px solid #ccc;
}
.btn-box button{
background: transparent;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
margin-right: 50px;
font-size: 20px;
font-weight: bold;
}
.btn-box .fa{
margin-right: 20px;
}
.btn-box:hover .fa{
color: #ff7846;
}
.content-right img{
width: 350px;
}
.content{
display: flex;
justify-content: center;
align-items: center;
margin: 5% auto;
position: absolute;
transform: translateX(100%);
transition: 0.3s;
}
.content-left{
flex-basis: 50%;
}
.content-left p{
font-size: 15px;
padding: 30px 0;
}
.content-right{
flex-basis: 50%;
text-align: center;
}
#content1{
transform: translateX(0px);
}
#btn1{
color: #ff7846;
}
/*----PRODUCT DETAILS CONATCT ICON----*/
.content-left a{
width: 100%;
display: block;
padding: 10px 5px;
border-radius: 20px;
text-decoration: none;
background-color: #ff7846;
color: #fff;
text-align: center;
float: left;
}
#contact-ws{
width: 100%;
display: block;
padding: 8px 5px;
border-radius: 20px;
text-decoration: none;
background-color: #25D366;
color: #fff;
float: left;
margin-top: 10px;
text-align: center;
}
#contact-fb{
background-color: #0078ff;
color: #fff;
float: left;
margin-top: 10px;
text-align: center;
width: 100%;
display: block;
padding: 8px 5px;
border-radius: 20px;
text-decoration: none;
}
.content-left i{
margin: 10px;
}
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="faqstyle.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous"> 
<!--Font Awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<!--IONICON-->
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>


<title>Product details</title>
</head>
<body>
<div class="hero">
<div class="btn-box">
<button id="btn1" onclick="openHTML()"><i class="fa fa-info-circle"></i>Description</button>
<button id="btn2"onclick="openCSS()"><i class="fa fa-question-circle"></i>Specifications</button>
<button id="btn3"onclick="openJS()"><i class="fa fa-shopping-cart"></i>Place Order</button>
</div>
<div class="content" id="content1">
<div class="content-left">
<h1>How does it work?</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis mollitia suscipit temporibus incidunt consequatur autem eveniet tenetur consequuntur labore
atque odit optio dolore ipsa maxime, impedit laudantium dolorem illo unde! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum error, voluptates distinctio natus culpa vel, vitae eius dolore pariatur possimus beatae
commodi! Odit, quas commodi molestias placeat rerum harum recusandae!</p>
</div>
<div class="content-right">
<img src="#">
</div>
</div>

<div class="content" id="content2">
<div class="content-left">
<h1>Extra details</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas nisi voluptas aut vero, commodi eum saepe temporibus expedita
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae blanditiis culpa ad, enim nisi velit perspiciatis aspernatur. Consequuntur neque asperiores ipsa voluptate alias labore ratione enim ipsum ut debitis? Officia.
quae, ab quo excepturi facere animi nulla quis labore deleniti totam nobis?</p>
</div>
<div class="content-right">
<img src="#">
</div>
</div>

<div class="content" id="content3">
<div class="content-left">
<h1>Get yours now!</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis mollitia suscipit temporibus incidunt consequatur autem eveniet tenetur consequuntur labore
atque odit optio dolore ipsa maxime, impedit laudantium dolorem illo unde!</p>
<a href="#"><i class="fas fa-envelope fa-2x"></i>Order via email</a>
<a href="#" id="contact-ws"><i class="fab fa-whatsapp fa-2x"></i>Order via Whatsapp</a>
<a href="#" id="contact-fb"><i class="fab fa-facebook-messenger fa-2x"></i>Order via Facebook Messenger-</a>
</div>
<div class="content-right">
<img src="#">
</div>
</div>
</div>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium