Я пытаюсь создать веб-страницу с двумя различными наборами текста (текст A и текст B), которые имеют разную длину и не упорядочены по A/B (т.е. есть Текст A до и после текста B).Animate display: none для отображения: inline
Наверху есть три кнопки: Show All
, Text A
и Text B
.
Когда Show All
нажата, весь текст отображаются, когда Text A
нажата, только текст появится текст и текст B Текст скрыт и т.д.
Я хочу, чтобы анимировать изменение текста (с замиранием анимация).
Есть ли простой способ сделать это?
function select(name) {
var navbar = document.getElementById("navbar");
var elems = navbar.getElementsByTagName("li");
var classes = [];
for (x = 0; x < elems.length; x++) {
var obj = elems[x].getElementsByTagName("a")[0];
obj.className = elems[x].id !== name ? "nav" : "navsel";
classes[x] = elems[x].id;
}
for (n = 0; n < classes.length; n++) {
var allelems = document.getElementsByClassName(classes[n]);
for (x = 0; x < allelems.length; x++) {
var s = allelems[x].className;
if (s.search(name) >= 0 || name === "all") {
s = s.replace(" hide", "");
} else if (s.search("hide") < 0) {
s += " hide";
}
allelems[x].className = s;
}
}
}
ul.nav {
list-style-type: none;
margin: 0;
padding: 0;
position: fixed;
top: 0px;
left: 0px;
background: #ffffff;
width: 100%;
height: 30px;
text-align: center;
vertical-align: middle;
}
li.nav {
float: left;
width: 33.3333%;
height: 100%;
display: table;
}
a.nav,
a:visited.nav {
display: table-cell;
font-weight: bold;
color: #ffffff;
background-color: #800000;
padding: 4px;
text-decoration: none;
vertical-align: middle;
}
a.navsel,
a:visited.navsel {
display: table-cell;
font-weight: bold;
color: #ffffff;
background-color: #C00000;
padding: 4px;
text-decoration: none;
vertical-align: middle;
}
a:hover.nav,
a:active.nav {
background-color: #A00000;
color: #ffffff;
}
a:hover.navsel,
a:active.navsel {
color: #ffffff;
}
.hide {
display: none;
}
<ul class="nav" id="navbar">
<li class="nav" id="all">
<a class="navsel" onclick="select('all');">Show All</a>
</li>
<li class="nav" id="texta">
<a class="nav" onclick="select('texta');">Text A</a>
</li>
<li class="nav" id="textb">
<a class="nav" onclick="select('textb');">Text B</a>
</li>
</ul>
<br />
<br />
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h2 class="texta">Text A</h2>
<p class="texta">We the people of the United States, in order to form a more perfect union, establish justice, insure domestic tranquility, provide for the common defense, promote the general welfare, and secure the blessings of liberty to ourselves and our posterity,
do ordain and establish this Constitution for the United States of America.</p>
<h2 class="textb">Text B</h2>
<p class="textb">
We hold these truths to be self-evident, that all men are created equal, that they are endowed by their Creator with certain unalienable Rights, that among these are Life, Liberty and the pursuit of Happiness.
<br />That to secure these rights, Governments are instituted among Men, deriving their just powers from the consent of the governed,
<br />That whenever any Form of Government becomes destructive of these ends, it is the Right of the People to alter or to abolish it, and to institute new Government, laying its foundation on such principles and organizing its powers in such form, as to
them shall seem most likely to effect their Safety and Happiness. Prudence, indeed, will dictate that Governments long established should not be changed for light and transient causes; and accordingly all experience hath shewn, that mankind are more
disposed to suffer, while evils are sufferable, than to right themselves by abolishing the forms to which they are accustomed. But when a long train of abuses and usurpations, pursuing invariably the same Object evinces a design to reduce them under
absolute Despotism, it is their right, it is their duty, to throw off such Government, and to provide new Guards for their future security.
<br />Such has been the patient sufferance of these Colonies; and such is now the necessity which constrains them to alter their former Systems of Government. The history of the present King of Great Britain is a history of repeated injuries and usurpations,
all having in direct object the establishment of an absolute Tyranny over these States.
</p>
<h1>More Text</h1>
<h2 class="texta">Text A</h2>
<p class="texta">Don't cry because it's over, smile because it happened.</p>
<h2 class="textb">Text B</h2>
<p class="textb">Live as if you were to die tomorrow. Learn as if you were to live forever.</p>
Вы ищете простую ваниль JavaScript ответа, или вы открыты для использования библиотеки как JQuery? – j08691
@ j08691 Я никогда не использовал jQuery и предпочел бы не определять, как его использовать (я бы предпочел простой ответ JS). – ricky3350