javascript - 如何根据点击更改另一个div的内容

标签 javascript html css

我想知道如何在点击菜单时改变div的内容

目前看起来像这样:enter image description here

这是我的 css 和 html 代码:

body {
  background-color: #555657;
  margin: 20px;
}


/* CADRE PARENT */

#global {}


/* CADRE 1 */

#cadre1 {
  float: left;
  width: 250px;
}

#cadre1 span {
  color: #33A7FF;
}


/* CADRE 2 */

#cadre2 {
  color: #2370AB;
}

#menu,
#menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

#menu li {
  display: block;
  position: relative;
  background-color: #2370AB;
}

#menu li ul li {
  background-color: white;
  text-align: center;
}

#menu ul li {
  display: inherit;
  border-radius: 0;
}

#menu ul li:hover {
  border-radius: 0;
}

#menu ul li:last-child {
  border-radius: 0 0 8px 8px;
}

#menu ul {
  position: absolute;
  z-index: 1000;
  max-height: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  -moz-transition: .8s all .3s;
  -webkit-transition: .8s all .3s;
  transition: .8s all .3s;
}

#menu li:hover ul {
  max-height: 15em;
}

#menu a {
  display: block;
  padding: 8px 32px;
  color: #fff;
}

#menu ul a {
  padding: 8px 0;
}

#menu li:hover a,
#menu li li:hover a {
  color: #000;
}


/* CADRE 3 */

#div_profil {
  display: block;
  height: 625px;
  background-color: white;
  overflow: auto;
}

#div_experience {
  display: none;
  height: 625px;
  background-color: white;
  overflow: auto;
}

#div_projet {
  display: none;
  height: 625px;
  background-color: white;
  overflow: auto;
}

#div_contact {
  display: none;
  height: 625px;
  background-color: white;
  overflow: auto;
}


/* FOOTER */

#footer {
  position: fixed;
  bottom: 20px;
  background-color: #2370AB;
  text-align: center;
}
<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="utf-8" />
  <title>portfolio FIEVEZ Clément</title>
  <link type="text/css" rel="stylesheet" href="boostrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/styles.css" />
</head>

<body>
  <!--CADRE PRINCIPAL-->
  <div class="row" id="global">

    <!--INFO BASIQUE-->
    <div class="col-sm-3" id="cadre1">
      <img src="images/myAvatar.png" alt="avatar" id="avatar" />
      <p><span>Nom :</span> FIEVEZ</p>
      <p><span>Prénom :</span> Clément (René)</p>
      <p><span>Date de naissance / Age :</span> né le 22 janvier 1996, 22ans</p>
      <p><span>Lieu de naissance :</span> DENAIN (059)</p>
      <p><span>Adresse :</span> 85 rue magenta, 53000 LAVAL</p>
    </div>

    <!--MENU-->
    <div class="col-sm-3" id="cadre2">
      <ul id="menu">
        <li><a href="#Profil">Profil</a>
        </li>
        <li><a id="btn_experience" href="#Experience">Expérience</a>
        </li>
        <li><a href="#Projets">Projets</a>
          <ul>
            <li><a href="#Projet1">Projet 1</a></li>
            <li><a href="#Projet2">Projet 2</a></li>
            <li><a href="#Projet3">Projet 3</a></li>
            <li><a href="#Projet4">projet 4</a></li>
          </ul>
        </li>
        <li><a href="#Contact">Contact</a>
        </li>
      </ul>
    </div>

    <!--CADRE CHANGEANT-->
    <div class="col-sm-5" id="div_profil">
      <p>Et Epigonus quidem amictu tenus philosophus, ut apparuit, prece frustra temptata, sulcatis lateribus mortisque metu admoto turpi confessione cogitatorum socium, quae nulla erant, fuisse firmavit cum nec vidisset quicquam nec audisset penitus expers
        forensium rerum; Eusebius vero obiecta fidentius negans, suspensus in eodem gradu constantiae stetit latrocinium illud esse, non iudicium clamans.
      </p>
    </div>

    <div class="col-sm-5" id="div_experience">
      <p>div experience</p>
    </div>

    <div class="col-sm-5" id="div_projet">
      <p>div projet</p>
    </div>

    <div class="col-sm-5" id="div_contact">
      <p>div contact</p>
    </div>

  </div>

  <footer class="col-sm-12" id="footer">
    <div>
      <p class="copyright">Tout droit reservé. FIEVEZ Corps.</p>
    </div>
  </footer>

  <script type="text/javascript" src="javascript/script.js"></script>
</body>

</html>

我希望当我点击菜单的一个选项卡时，显示的 div 被另一个 div 替换。

我尝试使用一些 javascript 代码，但这不起作用。

我应该用什么来实现我想要的？

感谢您的回复，祝您愉快。

最佳答案

您可以避免使用 Javascript 并尝试使用 :target 伪类的纯 css 方法

如您所见，所有内容都已在文档中，并且即使您不依赖 Javascript 和/或 CSS 也保留了主要功能(没有它们，页面仍然可以工作，这要归功于导航链接片段标识符作为它们的href属性。

Codepen demo

标记

<nav role="complementary">
    <ul role="tablist">
      <li role="tab" aria-controls="cnt1" id="tab1" aria-selected="true">
          <a href="#cnt1">Content 1</a></li>
      <li role="tab" aria-controls="cnt2" id="tab2" aria-selected="false">
          <a href="#cnt2">Content 2</a></li>
      <li role="tab" aria-controls="cnt3" id="tab3" aria-selected="false">
          <a href="#cnt3">Content 3</a></li>
      <li role="tab" aria-controls="cnt4" id="tab4" aria-selected="false">
          <a href="#cnt4">Content 4</a></li>
    </ul>
</nav>

<main>
   <section id="cnt1" aria-hidden="false" role="tabpanel" aria-labelledby="tab1">
     <h2>Content 1</h2> 
     <p>This is a lorem ipsum</p>
   </section>
   <section id="cnt2" aria-hidden="true" role="tabpanel" aria-labelledby="tab2">
     <h2>Content 2</h2>   
     <p>I am the content of link #2</p>
   </section>
   <section id="cnt3" aria-hidden="true" role="tabpanel" aria-labelledby="tab3">
     <h2>Content 3</h2>    
     <p>Here's another content</p>
   </section>
   <section id="cnt4" aria-hidden="true" role="tabpanel" aria-labelledby="tab4">
     <h2>Content 4</h2>    
     <p>And that's all folks!</p>
   </section>

</main>

CSS(相关)

body { display: flex; }

main { 
  flex: 1; 
  align-self: stretch; 
  position: relative; }

ul  { list-style: none; }

nav { align-self: flex-start; }

[role="tabpanel"] {
  position: absolute;
  transition: .25s opacity;
  background: #fff;
  padding: 0 20px;
  left: 0; right: 0; top: 0; bottom: 0;
  opacity: 0; }

[role="tabpanel"]:first-of-type { opacity: .99; }
[role="tabpanel"]:target { opacity: 1; }

通过简单的 CSS 转换，您可以切换内容外观。

请注意，我插入了一些role 和aria-* 属性:事实上，这种导航非常接近tab/tabpanels 小部件。

即使这里不使用 javascript，它也有很大帮助 to increase the accessibility of the content :例如您可以附加一个 transitionend 事件，检测可见部分(只需查看其 opacity 值)并更改一些 aria-* 属性，以便使使用辅助技术的人的生活更轻松。

Javascript
(仅用于可访问性目的)

var _gcs = window.getComputedStyle;
var _sections = document.querySelectorAll('[role="tabpanel"]');
var _tabs = document.querySelectorAll('[role="tab"]');

var _setARIAAttributes = () => {
  var currentHash;

  /* set aria-hidden on panels */
  [..._sections].forEach( ( s ) => {
        var hidden = +( _gcs( s ).getPropertyValue( 'opacity' ) ) < 1;
        s.setAttribute( 'aria-hidden', hidden);  
        if (!hidden) currentHash = s.id;
  }); 

  /* set aria-controls on tabs */
  [..._tabs].forEach( ( t ) => {
        var selected = t.getAttribute( 'aria-controls' ) === currentHash;
        t.setAttribute( 'aria-selected', selected );  
  }); 
}

if (!!location.hash) { _setARIAAttributes() }
window.addEventListener('transitionend', () => { _setARIAAttributes(); });

关于javascript - 如何根据点击更改另一个div的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49879303/

上一篇：带有过渡的 CSS

下一篇：css - 如何在 bootstrap 4 css 中实现验证？

相关文章：

javascript - 防止 Bootstrap 弹出窗口重置显示内容

html - CSS 表格列卡住

javascript - 我怎样才能 "treefy"我的 table ？

jquery group 每 3rd div

jquery - Jquery 中的 CSS3 - Nth-Child

css - 是否有针对 IE8 的 calc() 的纯 CSS 回退

javascript - 如何使用单选按钮启用和禁用某些 javascript 功能

javascript - 如何通过使用 anchor 标记的链接打开我安装的应用程序，如下图所示

javascript - 指定保存html2canvas到本地的文件名

css - div 上的两个线性渐变层

©2024 IT工具网  联系我们