2021-08-21-C站初级考试C1-模拟试卷编程题解析-06

最新推荐文章于 2023-07-02 01:21:27 发布

Amoor123

最新推荐文章于 2023-07-02 01:21:27 发布

阅读量226

点赞数 2

分类专栏： CSDN C认证考试练习文章标签： javascript

本文链接：https://blog.csdn.net/sabian2/article/details/119839889

版权

CSDN C认证考试练习专栏收录该内容

9 篇文章 4 订阅

订阅专栏

在这里插入图片描述
完成效果

快捷结题思路
取到相应的元素的id，然后根据点击事件修改点击后的效果
能够非常快的得出这个页面

<!DOCTYPE html>
<html lang="en">
<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">国内</button>
<div class="ctl"></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>

我报名了明天的C1考试，本来主要是为了检验下 python实力的，奈何必须要通过C1才能去考C4，明天考完把编程题再分享给大家
因为审核有政治问题，所以这里把ul里的li删掉了

Amoor123

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
2021-08-21-C站初级考试C1-模拟试卷编程题解析-06

完成效果快捷结题思路取到相应的元素的id，然后根据点击事件修改点击后的效果能够非常快的得出这个页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> button { display: inline-block; float: l.
复制链接

扫一扫