我嘗試使用 JavaScript 沒有成功，因為我不知道如何將我的底部（實際上是超鏈接）連接到 div 內容本身，所以我只需替換我的按鈕字串而不是 div 本身。圖片是最好的解釋：https : //ibb.co/xz0S8sm
這是我的代碼：
<div class="schedule-left">
<ul class="shedule-navigation">
<li class="schedule-list"><a id="schedule-color" class="schedule-b" href="#"><i id="sch" class="far fa-clock"></i>Schedule</a></li>
<li class="schedule-list"><a id="schedule-color-b" class="schedule-b" href="#"><i id="sch" class="fas fa-list"></i>Tracking</a></li>
<li class="schedule-list"><a id="schedule-color-b" class="schedule-b" href="#"><i id="sch" class="far fa-calendar-alt"></i>Organize</a></li>
</ul>
<div id="schedule-tasks">
<p><strong>Schedule tasks</strong> to keep track of their completion. Sync provides <br> multiple scheduling options including alarms and reminders.</p>
<ul>
<li class="schedule-description"><i id="check-square" class="far fa-check-square"></i>You can always add new tasks or change the settings of existing <br> ones in your calendar view or the app control panel</li>
<li class="schedule-description"><i id="check-square" class="far fa-check-square"></i>It's easy to stay focused on your most important daily activities <br> that will get you closer to meeting your goals</li>
<li class="schedule-description"><i id="check-square" class="far fa-check-square"></i>Use phone reminders to free up your long term memory which <br> will reduce stress and make you more productive</li>
</ul>
<ul class="lightbox">
<a class="butoon-lightbox" href="#">Terms</a>
<a id="privacy" class="butoon-lightbox" href="#">Privacy</a>
</ul>
</div>
<div id="tracking-tasks" style="display:none;">
<p><strong>Keep track of everything</strong> and analyse your progress while using the app. In less than a month you should be seeing improved results when it comes to time management and task prioritization</p>
<p><strong>Anyone can enjoy the app</strong> matter their gender, age, occupation or location in the world. Sync's algorithms have been built to be flexible and functional for any person in the world</p>
<p><strong>Achieve the impossible</strong> just by carefully monitoring your progress and keeping the app updated with daily operations. It's easier than you think and it only takes a couple of minutes</p>
<a href="#">Terms & Conditions >></a>
</div>
<div id="organize-tasks" style="display:none;">
<p><strong>Use the power of social interactivity</strong> to keep you motivated and focused on your daily and long term goals. It's revolutionary.</p>
<ul>
<li class="schedule-description"><i id="check-square" class="far fa-check-square"></i>Commiting to something in front of a crowd gives you little room to walk back on your promise and makes you push on</li>
<li class="schedule-description"><i id="check-square" class="far fa-check-square"></i>No more frustrations of loosing focus and not being efficient. Sync main purpose is to solve just that and make you happy</li>
<li class="schedule-description"><i id="check-square" class="far fa-check-square"></i>It's the first mobile app that can turn you in a better organized person without the pressure of failing like other systems</li>
<li class="schedule-description"><i id="check-square" class="far fa-check-square"></i>Recognized by a lot of trainers and life coaches Sync is the number one tool they recommend time management</li>
</ul>
</div>
</div>
<div class="shedule-right">
<img class="december" src="images/description-2-app.png" alt="">
</div>
</div>uj5u.com熱心網友回復：
我建議你有兩種方法來做到這一點，或者使用display:none和display:revert切換你試圖在你的代碼中做的事情，或者只使用 1 個 div 并直接使用 Javascript 撰寫。
使用display:none和display:revert：
let buttons = document.querySelectorAll('button')
buttons[0].onclick =function(){
document.querySelector('#schedule-tasks').style.display ='revert'
document.querySelector('#tracking-tasks').style.display ='none'
document.querySelector('#organize-tasks').style.display = 'none'
}
buttons[1].onclick = function(){
document.querySelector('#schedule-tasks').style.display ='none'
document.querySelector('#tracking-tasks').style.display ='revert'
document.querySelector('#organize-tasks').style.display = 'none'
}
buttons[2].onclick = function(){
document.querySelector('#schedule-tasks').style.display ='none'
document.querySelector('#tracking-tasks').style.display ='none'
document.querySelector('#organize-tasks').style.display = 'revert'
}<div class="schedule-left">
<ul class="shedule-navigation">
<li class="schedule-list"><button id="schedule-color-b" class="schedule-b" ><i id="sch" class="far fa-clock"></i>Schedule</li>
<li class="schedule-list"><button id="schedule-color-b" class="schedule-b" ><i id="sch" class="fas fa-list"></i>Tracking</li>
<li class="schedule-list"><button id="schedule-color-b" class="schedule-b" ><i id="sch" class="far fa-calendar-alt"></i>Organize</li>
</ul>
<div id="schedule-tasks">
<p><strong>Schedule tasks</strong> to keep track of their completion. Sync provides <br> multiple scheduling options including alarms and reminders.</p>
<ul>
<li class="schedule-description"><i id="check-square" class="far fa-check-square"></i>You can always add new tasks or change the settings of existing <br> ones in your calendar view or the app control panel</li>
<li class="schedule-description"><i id="check-square" class="far fa-check-square"></i>It's easy to stay focused on your most important daily activities <br> that will get you closer to meeting your goals</li>
<li class="schedule-description"><i id="check-square" class="far fa-check-square"></i>Use phone reminders to free up your long term memory which <br> will reduce stress and make you more productive</li>
</ul>
<ul class="lightbox">
<a class="butoon-lightbox" href="#">Terms</a>
<a id="privacy" class="butoon-lightbox" href="#">Privacy</a>
</ul>
</div>
<div id="tracking-tasks" style="display:none;">
<p><strong>Keep track of everything</strong> and analyse your progress while using the app. In less than a month you should be seeing improved results when it comes to time management and task prioritization</p>
<p><strong>Anyone can enjoy the app</strong> matter their gender, age, occupation or location in the world. Sync's algorithms have been built to be flexible and functional for any person in the world</p>
<p><strong>Achieve the impossible</strong> just by carefully monitoring your progress and keeping the app updated with daily operations. It's easier than you think and it only takes a couple of minutes</p>
<a href="#">Terms & Conditions >></a>
</div>
<div id="organize-tasks" style="display:none;">
<p><strong>Use the power of social interactivity</strong> to keep you motivated and focused on your daily and long term goals. It's revolutionary.</p>
<ul>
<li class="schedule-description"><i id="check-square" class="far fa-check-square"></i>Commiting to something in front of a crowd gives you little room to walk back on your promise and makes you push on</li>
<li class="schedule-description"><i id="check-square" class="far fa-check-square"></i>No more frustrations of loosing focus and not being efficient. Sync main purpose is to solve just that and make you happy</li>
<li class="schedule-description"><i id="check-square" class="far fa-check-square"></i>It's the first mobile app that can turn you in a better organized person without the pressure of failing like other systems</li>
<li class="schedule-description"><i id="check-square" class="far fa-check-square"></i>Recognized by a lot of trainers and life coaches Sync is the number one tool they recommend time management</li>
</ul>
</div>
</div>
<div class="shedule-right">
<img class="december" src="images/description-2-app.png" alt="">
</div>
</div>直接使用Javascript撰寫
let buttons = document.querySelectorAll('button')
let content = document.querySelector('#content')
buttons[0].onclick= function(){content1()};
buttons[1].onclick= function(){content2()};
buttons[2].onclick= function() {content3()};
//make the initial value to be schedule-tasks
window.onload = content1()
function content1(){
content.innerHTML = `
<div id="schedule-tasks">
<p><strong>Schedule tasks</strong> to keep track of their completion. Sync provides <br> multiple scheduling options including alarms and reminders.</p>
<ul>
<li ><i id="check-square" ></i>You can always add new tasks or change the settings of existing <br> ones in your calendar view or the app control panel</li>
<li ><i id="check-square" ></i>It's easy to stay focused on your most important daily activities <br> that will get you closer to meeting your goals</li>
<li ><i id="check-square" ></i>Use phone reminders to free up your long term memory which <br> will reduce stress and make you more productive</li>
</ul>
<ul >
<a href="#">Terms</a>
<a id="privacy" href="#">Privacy</a>
</ul>
</div>`
}
function content2(){
content.innerHTML= `
<div id="tracking-tasks" >
<p><strong>Keep track of everything</strong> and analyse your progress while using the app. In less than a month you should be seeing improved results when it comes to time management and task prioritization</p>
<p><strong>Anyone can enjoy the app</strong> matter their gender, age, occupation or location in the world. Sync's algorithms have been built to be flexible and functional for any person in the world</p>
<p><strong>Achieve the impossible</strong> just by carefully monitoring your progress and keeping the app updated with daily operations. It's easier than you think and it only takes a couple of minutes</p>
<a href="#">Terms & Conditions >></a>
</div>
`
}
function content3(){
content.innerHTML=` <div id="organize-tasks" >
<p><strong>Use the power of social interactivity</strong> to keep you motivated and focused on your daily and long term goals. It's revolutionary.</p>
<ul>
<li ><i id="check-square" ></i>Commiting to something in front of a crowd gives you little room to walk back on your promise and makes you push on</li>
<li ><i id="check-square" ></i>No more frustrations of loosing focus and not being efficient. Sync main purpose is to solve just that and make you happy</li>
<li ><i id="check-square" ></i>It's the first mobile app that can turn you in a better organized person without the pressure of failing like other systems</li>
<li ><i id="check-square" ></i>Recognized by a lot of trainers and life coaches Sync is the number one tool they recommend time management</li>
</ul>
</div>
`
}<div class="schedule-left">
<ul class="shedule-navigation">
<li class="schedule-list"><button id="schedule-color-b" class="schedule-b" ><i id="sch" class="far fa-clock"></i>Schedule</li>
<li class="schedule-list"><button id="schedule-color-b" class="schedule-b" ><i id="sch" class="fas fa-list"></i>Tracking</li>
<li class="schedule-list"><button id="schedule-color-b" class="schedule-b" ><i id="sch" class="far fa-calendar-alt"></i>Organize</li>
</ul>
<div id='content'></div>
<div class="shedule-right">
<img class="december" src="images/description-2-app.png" alt="">
</div>
</div>uj5u.com熱心網友回復：
您可以id在單擊所需底部時使用onclick事件將內容傳遞給 JavaScript 函式，并使該div樣式可見。在此之后，您可以隱藏其他內容的可見性。這是作業：
function changeContent(id) {
document.getElementById(id).style.display = 'block';
if (id != 'schedule-tasks')
document.getElementById('schedule-tasks').style.display = 'none';
if (id != 'tracking-tasks')
document.getElementById('tracking-tasks').style.display = 'none';
if (id != 'organize-tasks')
document.getElementById('organize-tasks').style.display = 'none';
}<div class="schedule-left">
<ul class="shedule-navigation">
<li class="schedule-list"><a id="schedule-color" onclick="changeContent('schedule-tasks')" class="schedule-b" href="#"><i id="sch" class="far fa-clock"></i>Schedule</a></li>
<li class="schedule-list"><a id="schedule-color-b" onclick="changeContent('tracking-tasks')" class="schedule-b" href="#"><i id="sch" class="fas fa-list"></i>Tracking</a></li>
<li class="schedule-list"><a id="schedule-color-b" onclick="changeContent('organize-tasks')" class="schedule-b" href="#"><i id="sch" class="far fa-calendar-alt"></i>Organize</a></li>
</ul>
<div id="schedule-tasks">
<p><strong>Schedule tasks</strong> to keep track of their completion. Sync provides <br> multiple scheduling options including alarms and reminders.</p>
<ul>
<li class="schedule-description"><i id="check-square" class="far fa-check-square"></i>You can always add new tasks or change the settings of existing <br> ones in your calendar view or the app control panel</li>
<li class="schedule-description"><i id="check-square" class="far fa-check-square"></i>It's easy to stay focused on your most important daily activities <br> that will get you closer to meeting your goals</li>
<li class="schedule-description"><i id="check-square" class="far fa-check-square"></i>Use phone reminders to free up your long term memory which <br> will reduce stress and make you more productive</li>
</ul>
<ul class="lightbox">
<a class="butoon-lightbox" href="#">Terms</a>
<a id="privacy" class="butoon-lightbox" href="#">Privacy</a>
</ul>
</div>
<div id="tracking-tasks" style="display:none;">
<p><strong>Keep track of everything</strong> and analyse your progress while using the app. In less than a month you should be seeing improved results when it comes to time management and task prioritization</p>
<p><strong>Anyone can enjoy the app</strong> matter their gender, age, occupation or location in the world. Sync's algorithms have been built to be flexible and functional for any person in the world</p>
<p><strong>Achieve the impossible</strong> just by carefully monitoring your progress and keeping the app updated with daily operations. It's easier than you think and it only takes a couple of minutes</p>
<a href="#">Terms & Conditions >></a>
</div>
<div id="organize-tasks" style="display:none;">
<p><strong>Use the power of social interactivity</strong> to keep you motivated and focused on your daily and long term goals. It's revolutionary.</p>
<ul>
<li class="schedule-description"><i id="check-square" class="far fa-check-square"></i>Commiting to something in front of a crowd gives you little room to walk back on your promise and makes you push on</li>
<li class="schedule-description"><i id="check-square" class="far fa-check-square"></i>No more frustrations of loosing focus and not being efficient. Sync main purpose is to solve just that and make you happy</li>
<li class="schedule-description"><i id="check-square" class="far fa-check-square"></i>It's the first mobile app that can turn you in a better organized person without the pressure of failing like other systems</li>
<li class="schedule-description"><i id="check-square" class="far fa-check-square"></i>Recognized by a lot of trainers and life coaches Sync is the number one tool they recommend time management</li>
</ul>
</div>
</div>
<div class="shedule-right">
<img class="december" src="images/description-2-app.png" alt="">
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/406679.html
標籤：
上一篇：如何添加不同的占位符顏色