始める前に、ここには多くの情報があることを知っておく必要があります。1 つはまだ pix を投稿できないため、2 つはお互いの時間を無駄にしないためです。この投稿で私が受けたすべての助けは大歓迎です!
そのため、リスト要素が大きなテキストでインラインとして表示される、順序付けられていないリストを使用しています。リスト自体がページの約 80% を占めています。
リスト要素をクリックすると、リスト要素が何を意味するかを説明するリスト要素を置き換えるために div がポップアップする必要があります。div をクリックすると、div が消えてリスト要素が再び表示されます。
私が直面している問題は、順序付けされていないリストに配置されている方法 (マージンとすべて) を正確に div 要素に置き換えてほしいということです。代わりに、div が毎回左側に表示され、順序付けられていないリスト要素が右側に再配置されます。
html は次のとおりです。
<div id="bottom">
<h1 class="issue_line">So what's the issue in Niagara Falls?</h1>
<ul class="issue_headings">
<li class="issue1">Education</li>
<div class="quarter-box1">
<p>The members of NOAH recognize that <strong>quality education</strong> is
necessary for any community to thrive...<br/>
<a href="issues_taskforces.html">Read more.</a></p>
</div>
<li class="issue2">Local Hiring</li>
<div class="quarter-box2">
<p>The need for jobs in Niagara County is overwhelming, and NOAH is working to
create more local jobs through the policy level...<br/>
<a href="issues_taskforces.html">Read more.</a></p>
</div>
<li class="issue3">Economic Development</li>
<div class="quarter-box3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et
facilisis risus. Quisque a gravida urna. Ut leo ligula...<br/>
<a href="issues_taskforces.html">Read more.</a></p>
</div>
<li class="issue4">Trasnportation</li>
<div class="quarter-box4">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et
facilisis risus. Quisque a gravida urna. Ut leo ligula...<br/>
<a href="issues_taskforces.html">Read more.</a></p>
</div>
</ul>
</div>
ここにCSSがあります
#bottom {
position: relative;
width: 100%;
margin: 0 auto;
clear: both;
padding-top: 5px;
padding-bottom: 5px;
}
ul.issue_headings {
width: 1498px;
float: left;
margin-top: 50px;
margin-bottom: 50px;
padding: 0;
list-style-type: none;
display: none;
text-align: center;
}
ul.issue_headings li {
display: inline;
margin-left: 2%;
padding: 0;
font-size: 3em;
color: #9ac0e2;
}
ul.issue_headings li:hover {
color: #FF9933;
}
.quarter-box1 {
float: left;
margin-left: 50px;
background-color: rgba(255, 255, 255, .9);
border: 3px solid #0c69bf;
box-shadow: 5px 5px 20px black;
width: 280px;
height: 150px;
overflow: hidden;
display: none;
}
.quarter-box2 {
float: left;
margin-left: 100px;
background-color: rgba(255, 255, 255, .9);
border: 3px solid #0c69bf;
box-shadow: 5px 5px 20px black;
width: 280px;
height: 150px;
overflow: hidden;
display: none;
}
.quarter-box3 {
float: left;
margin-left: 150px;
background-color: rgba(255, 255, 255, .9);
border: 3px solid #0c69bf;
box-shadow: 5px 5px 20px black;
width: 280px;
height: 150px;
overflow: hidden;
display: none;
}
.quarter-box4 {
float: left;
margin-left: 200px;
background-color: rgba(255, 255, 255, .9);
border: 3px solid #0c69bf;
box-shadow: 5px 5px 20px black;
width: 280px;
height: 150px;
overflow: hidden;
display: none;
}
.quarter-box1:hover, .quarter-box2:hover,.quarter-box3:hover, .quarter-box4:hover {
border: 3px solid #FF9933;
}
ここにjQueryがあります
$('h1.issue_line').click(function(){
$('h1.issue_line').hide("slow");
$('ul.issue_headings').show("slow");
$('div.quarter-box1,div.quarter-box2,div.quarter-box3,div.quarter-
box4').hide("slow");
});
$('ul.issue_headings li.issue1').click(function(){
$('ul.issue_headings li.issue1,div.quarter-box2,div.quarter-box3,div.quarter-
box4').hide("slow");
$('div.quarter-box1,ul.issue_headings li.issue2,ul.issue_headings
li.issue3,ul.issue_headings li.issue4').show("slow");
});
$('ul.issue_headings li.issue2').click(function(){
$('ul.issue_headings li.issue2,div.quarter-box1,div.quarter-box3,div.quarter-
box4').hide("slow");
$('div.quarter-box2,ul.issue_headings li.issue1,ul.issue_headings
li.issue3,ul.issue_headings li.issue4').show("slow");
});
$('ul.issue_headings li.issue3').click(function(){
$('ul.issue_headings li.issue3,div.quarter-box1,div.quarter-box2,div.quarter-
box4').hide("slow");
$('div.quarter-box3,ul.issue_headings li.issue1,ul.issue_headings
li.issue2,ul.issue_headings li.issue4').show("slow");
});
$('ul.issue_headings li.issue4').click(function(){
$('ul.issue_headings li.issue4,div.quarter-box1,div.quarter-box2,div.quarter-
box3').hide("slow");
$('div.quarter-box4,ul.issue_headings li.issue1,ul.issue_headings
li.issue2,ul.issue_headings li.issue3').show("slow");
});
$('div.quarter-box1').click(function(){
$('div.quarter-box1').hide("slow");
$('ul.issue_headings li.issue1').show("slow");
});
$('div.quarter-box2').click(function(){
$('div.quarter-box2').hide("slow");
$('ul.issue_headings li.issue2').show("slow");
});
$('div.quarter-box3').click(function(){
$('div.quarter-box3').hide("slow");
$('ul.issue_headings li.issue3').show("slow");
});
$('div.quarter-box4').click(function(){
$('div.quarter-box4').hide("slow");
$('ul.issue_headings li.issue4').show("slow");
});
あなたの考えを知ってください！