2021-08-21-C站初級考試C1-模擬試卷程式設計題解析-06

專注的阿熊發表於2021-08-23
程式設計

<!DOCTYPE html>

<html>

<head>

     <meta charset="UTF-8">

     <title>Title</title>

   <style>

     button {

       display: inline-block;

       float: left;

       height: 40px;

       width: 60px;

       text-align: center;

       border:1px solid lightgray;

       background-color: white;

       }

     .btn {

       border: 1px solid lightskyblue;

     }

     #div1{

       display: block;

       width: 500px;

       height: 250px;

       background-color: white;

       border: 1px solid lightgray;

     }

     .ctl{

       clear: both;

     }

     li{

       padding: 10px 5px;

     }

   </style>

</head>

<body>

<button id="btn1"> 國際 </button>

<button id="btn2">外匯跟單gendan5.com 國內 </button>

<div></div>

<div id="div1">

   <ul id="ul1">

   </ul>

   <ul id="ul2">

   </ul>

</div>

<script>

   ul1=document.getElementById('ul1')

   ul2=document.getElementById('ul2')

   btn1=document.getElementById('btn1')

   btn2=document.getElementById('btn2')

   btn1.classList.add("btn")

   // ul2.style.visibility='hidden'

   ul2.style.display='none'

   function func1(){

     // ul1.style.visibility='visible'

     // ul2.style.visibility='hidden'

     btn1.classList.add('btn')

     btn2.classList.remove('btn')

     ul2.style.display='none'

     ul1.style.display='block'

   }

   function func2(){

     // ul1.style.visibility='hidden'

     // ul2.style.visibility='visible'

     btn2.classList.add('btn')

     btn1.classList.remove('btn')

     ul1.style.display='none'

     ul2.style.display='block'

   }

   btn1.addEventListener('click',func1)

   btn2.addEventListener('click',func2)

</script>

</body>

</html>


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69946337/viewspace-2788367/，如需轉載，請註明出處，否則將追究法律責任。

相關文章