我希望淡出（或删除？）div中的文本，然后淡化或在按钮单击时在不同的div中显示文本。我在编写jQuery时遇到一些麻烦，非常感谢任何建议或帮助。
我应该主动删除div的内容吗？或者使用replaceWith（）？我应该在css中将显示设置为none吗？
我非常感谢任何帮助以及有关我的代码的任何一般建议。
以下是它的样子：
<!-- Jibx run -->
<dependency>
<groupId>org.jibx</groupId>
<artifactId>jibx-run</artifactId>
<version>1.3.1</version>
</dependency>
我现在的jQuery：
<div class="container">
<div class="row">
<div class="col-12">
<header>
<h1 class=""><a href="index.html">##</a></h1>
<h3 class="">Educational Consultant and Tutor</h3>
<ul class="topul">
<li>
<button id="home">
<p>Home</p>
</button>
</li>
<li>
<button id="aboutme">
<p>About Me</p>
</button>
</li>
<li>
<button id="tuition">
<p>Tuition</p>
</button>
</li>
<li>
<button id="consultancy">
<p>Consultancy</p>
</button>
</li>
<li>
<button id="testimonials">
<p>Testimonials</p>
</button>
</li>
<li>
<button id="contact">
<p>Contact</p>
</button>
</li>
</ul>
</header>
</div>
</div>
</div>
<div class="container" id="secondcontainer">
<div class="row" id="mainstuff">
<div class="col-12 col-lg-4 text-center " id="bigimage">
<img src="images/Raph%20edited.jpg" alt="">
</div>
<div class="col-12 col-lg-8 p-4 " id="textarea">
<div id="texts" class="vertical ">
<p>I am an experienced 11+ tutor currently living and working in London. Former pupils have been accepted to Dulwich College, Latymer Upper, Godolphin and Latymer, St Paul’s Girls’ School, Wetherby Senior School, The Harrodian and Queen’s Gate.</p>
<p>After graduating from Cambridge in 2011, I moved to Moscow, Russia, where I worked as a private tutor for three years, preparing pupils for entrance to London schools. As well as helping my pupils with their academic studies, I also supervised their music practice (piano, singing and drums), introduced them to basic computer programming blah blah I returned to the UK only to promptly leave again, and in 2016 I travelled through South America and Australia, teaching pupils English and maths in Rio de Janeiro, Buenos Aires, Rosario, Mendoza and Brisbane. </p>
</div>
<div class="vertical " id="aboutmetext">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p id="finalone">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
</div>
<div class="vertical " id="tuitiontext">
<p>TUITION TEXTOadipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p id="finalone">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
不是100％肯定你想要的东西，但试试这个。它淡化了与按钮相反的文本，并淡化其他文本。
$("#aboutme,#tuition").click(function() {
var id = $(this).attr("id") + "text"
$(current).fadeOut();
$("#" + id).fadeIn();
current = "#" + id;
});
<强>演示
$(document).ready(function() {
var current = "#texts";
$("#aboutme,#tuition").click(function() {
var id = $(this).attr("id") + "text"
$(current).fadeOut();
$("#" + id).fadeIn();
current = "#" + id;
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12">
<header>
<h1 class=""><a href="index.html">##</a></h1>
<h3 class="">Educational Consultant and Tutor</h3>
<ul class="topul">
<li>
<button id="home">
<p>Home</p>
</button>
</li>
<li>
<button id="aboutme">
<p>About Me</p>
</button>
</li>
<li>
<button id="tuition">
<p>Tuition</p>
</button>
</li>
<li>
<button id="consultancy">
<p>Consultancy</p>
</button>
</li>
<li>
<button id="testimonials">
<p>Testimonials</p>
</button>
</li>
<li>
<button id="contact">
<p>Contact</p>
</button>
</li>
</ul>
</header>
</div>
</div>
</div>
<div class="container" id="secondcontainer">
<div class="row" id="mainstuff">
<div class="col-12 col-lg-4 text-center " id="bigimage">
<img src="images/Raph%20edited.jpg" alt="">
</div>
<div class="col-12 col-lg-8 p-4 " id="textarea">
<div id="texts" class="vertical ">
<p>I am an experienced 11+ tutor currently living and working in London. Former pupils have been accepted to Dulwich College, Latymer Upper, Godolphin and Latymer, St Paul’s Girls’ School, Wetherby Senior School, The Harrodian and Queen’s Gate.</p>
<p>After graduating from Cambridge in 2011, I moved to Moscow, Russia, where I worked as a private tutor for three years, preparing pupils for entrance to London schools. As well as helping my pupils with their academic studies, I also supervised
their music practice (piano, singing and drums), introduced them to basic computer programming blah blah I returned to the UK only to promptly leave again, and in 2016 I travelled through South America and Australia, teaching pupils English
and maths in Rio de Janeiro, Buenos Aires, Rosario, Mendoza and Brisbane. </p>
</div>
<div class="vertical " id="aboutmetext">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p id="finalone">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
</div>
<div class="vertical " id="tuitiontext">
<p>TUITION TEXTOadipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
<p id="finalone">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum culpa assumenda ratione sunt tempora obcaecati nobis sed nemo omnis eligendi odio aut quia, debitis necessitatibus quisquam, provident aspernatur quam.</p>
</div>
</div>
</div>
</div>
答案 1 :(得分：0)
我会通过设置CSS opacity属性的动画来淡出。当动画结束时，我会显示不同元素的文本。
//fade out
$(selector).animate({opacity: 0}, 2000, function(){
//show different element's text
$(differentElement).show();
});
$('#first').on('click', function(e){
e.preventDefault();
$(this).children('p').animate({opacity: 0}, 2000, function(){
$('#text p').show();
});
});#text p{
display:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="first">
<p>Hello World</p>
</button>
<div id="text">
<p>Lots of text content here</p>
</div>