根据导航栏中的活动链接显示内容。

huangapple
go评论103阅读模式
英文:

Show content based on active link in nav bar

问题

I created three active links using CSS and JavaScript. 我使用CSS和JavaScript创建了三个活动链接。

I have three data sets in forms of image that I want to show based on which link is active. 我有三个图像数据集，我想根据哪个链接处于活动状态来显示它们。

The images will be below the link in the form of swiper slides. 这些图像将以swiper幻灯片的形式显示在链接下方。

How I do this? 我应该如何做到这一点？

My reference for this is the active slide on New Balance's website. 我的参考是New Balance网站上的活动幻灯片。

英文:

I created three active links using CSS and javascript. I have three data sets in forms of image that I want to show based on which link is active. The images will be below the link in form of swiper slides. How I do this? My reference for this is the active slide on new balances website

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .active-link {
  2.   position: relative;
  3.   display: flex;
  4.   top: 12rem;
  5.   /*position for active link */
  6.   justify-content: center;
  7. }
  9. .button {
  10.   padding: 0 40px 10px 40px;
  11.   cursor: pointer;
  12.   display: inline-block;
  13.   font-weight: 500;
  14.   border-bottom: 2px solid black;
  15. }
  17. .button:active,
  18. .active {
  19.   color: red;
  20.   border-bottom: 5px solid red;
  21.   padding-bottom: 7px;
  22. }
  24. .slide-container {
  25.   position: relative;
  26.   // I&#39;m not sure what you&#39;re looking for visually so I just used a top position greater than what you&#39;re already using on the buttons.
  27.   top: 14rem;
  28.   display: none;
  29. }
  31. .slide-container.active {
  32.   display: block;
  33. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;active-link&quot; id=&quot;active-link&quot;&gt;
  2.   &lt;li&gt;
  3.     &lt;a class=&quot;button&quot;&gt;Him&lt;/a&gt;
  4.   &lt;/li&gt;
  5.   &lt;li&gt;
  6.     &lt;a class=&quot;button active&quot;&gt;2&lt;/a&gt;
  7.   &lt;/li&gt;
  8.   &lt;li&gt;
  9.     &lt;a class=&quot;button&quot;&gt;Her&lt;/a&gt;
  10.   &lt;/li&gt;
  11. &lt;/div&gt;
  12. &lt;div class=&quot;slide-containers&quot;&gt;
  13.   &lt;div id=&quot;slide-container-1&quot; class=&quot;slide-container&quot;&gt;
  14.     Slide Container 1
  15.   &lt;/div&gt;
  16.   &lt;div id=&quot;slide-container-2&quot; class=&quot;slide-container&quot;&gt;
  17.     Slide Container 2
  18.   &lt;/div&gt;
  19.   &lt;div id=&quot;slide-container-3&quot; class=&quot;slide-container&quot;&gt;
  20.     Slide Container 3
  21.   &lt;/div&gt;
  22. &lt;/div&gt;
  26. &lt;script&gt;
  27.   var btnContainer = document.getElementById(&quot;active-link&quot;);
  28.   var btns = btnContainer.getElementsByClassName(&quot;button&quot;);
  30.   function removeClass(elems, className) {
  31.     [].forEach.call(document.querySelectorAll(elems), function(el) {
  32.       el.classList.remove(className);
  33.     });
  34.   }
  36.   const resetSlideContainers = () =&gt; {
  37.     [...document.querySelectorAll(&#39;.slide-container&#39;)].forEach((slide) =&gt;
  38.       slide.classList.remove(&#39;active&#39;));
  39.   }
  41.   for (var i = 0; i &lt; btns.length; i++) {
  42.     btns[i].addEventListener(&#39;click&#39;, function(e) {
  43.       removeClass(&#39;.button&#39;, &#39;active&#39;)
  44.       this.classList.toggle(&#39;active&#39;);
  45.       resetSlideContainers();
  46.       document.getElementById(this.getAttribute(&#39;data-slide&#39;)).classList.add(&#39;active&#39;);
  47.     })
  48.   }
  49. &lt;/script&gt;

<!-- end snippet -->

I created three active links using CSS and javascript. I have three data sets in forms of image that I want to show based on which link is active. The images will be below the link in form of swiper slides. How I do this? My reference for this is the active slide on new balances website

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. var btnContainer = document.getElementById(&quot;active-link&quot;);
  2. var btns = btnContainer.getElementsByClassName(&quot;button&quot;);
  4. function removeClass(elems, className) {
  5.   [].forEach.call(document.querySelectorAll(elems), function(el) {
  6.     el.classList.remove(className);
  7.   });
  8. }
  10. for (var i = 0; i &lt; btns.length; i++) {
  11.   btns[i].addEventListener(&#39;click&#39;, function(e) {
  12.     removeClass(&#39;.button&#39;, &#39;active&#39;)
  13.     this.classList.toggle(&#39;active&#39;);
  14.   })
  15. }

<!-- language: lang-css -->

  1. .active-link {
  2.   position: relative;
  3.   display: flex;
  4.   top: 12rem;
  5.   justify-content: center;
  6. }
  8. .button {
  9.   padding: 0 40px 10px 40px;
  10.   cursor: pointer;
  11.   display: inline-block;
  12.   font-weight: 500;
  13.   border-bottom: 2px solid black;
  14. }
  16. .button:active,
  17. .active {
  18.   color: red;
  19.   border-bottom: 5px solid blue;
  20.   padding-bottom: 7px;
  21. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;active-link&quot; id=&quot;active-link&quot;&gt;
  2.   &lt;li&gt;
  3.     &lt;a class=&quot;button&quot;&gt;1&lt;/a&gt;
  4.   &lt;/li&gt;
  5.   &lt;li&gt;
  6.     &lt;a class=&quot;button active&quot;&gt;2&lt;/a&gt;
  7.   &lt;/li&gt;
  8.   &lt;li&gt;
  9.     &lt;a class=&quot;button&quot;&gt;3&lt;/a&gt;
  10.   &lt;/li&gt;
  11. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 0

  1. 我会创建一个容器来存放每个幻灯片的内容，并使用数据属性将按钮链接到幻灯片。当点击按钮时，你可以移除前一个幻灯片的活动类，并为当前幻灯片添加一个新的类。以下是我添加的相关代码，并附有底部的Codepen链接。
  3. ```html
  4. &lt;div class=&quot;active-link&quot; id=&quot;active-link&quot;&gt;
  5.   &lt;li&gt;
  6.     &lt;a class=&quot;button&quot; data-slide=&quot;slide-container-1&quot;&gt;1&lt;/a&gt;
  7.   &lt;/li&gt;
  8.   &lt;li&gt;
  9.     &lt;a class=&quot;button active&quot; data-slide=&quot;slide-container-2&quot;&gt;2&lt;/a&gt;
  10.   &lt;/li&gt;
  11.   &lt;li&gt;
  12.     &lt;a class=&quot;button&quot; data-slide=&quot;slide-container-3&quot;&gt;3&lt;/a&gt;
  13.   &lt;/li&gt;
  14. &lt;/div&gt;
  16. &lt;div class=&quot;slide-containers&quot;&gt;
  17.   &lt;div id=&quot;slide-container-1&quot; class=&quot;slide-container&quot;&gt;
  18.     Slide Container 1
  19.   &lt;/div&gt;
  20.   &lt;div id=&quot;slide-container-2&quot; class=&quot;slide-container&quot;&gt;
  21.     Slide Container 2
  22.   &lt;/div&gt;
  23.   &lt;div id=&quot;slide-container-3&quot; class=&quot;slide-container&quot;&gt;
  24.     Slide Container 3
  25.   &lt;/div&gt;
  26. &lt;/div&gt;
  1. .slide-container {
  2.     position: relative;
  3.     // 我不确定你在视觉上想要什么，所以我只是使用了一个比按钮上已经使用的top位置更大的值。
  4.     top: 14rem;
  5.     display: none;
  6. }
  8. .slide-container.active {
  9.     display: block;
  10. }
  1. const resetSlideContainers = () =&gt; {
  2.   [ ...document.querySelectorAll(&#39;.slide-container&#39;) ].forEach((slide) =&gt; slide.classList.remove(&#39;active&#39;));
  3. }
  5. for (var i = 0; i &lt; btns.length; i++) {
  6.   btns[i].addEventListener(&#39;click&#39;, function(e) {
  7.     removeClass(&#39;.button&#39;, &#39;active&#39;)
  8.     this.classList.toggle(&#39;active&#39;);
  9.     resetSlideContainers();
  10.     document.getElementById(this.getAttribute(&#39;data-slide&#39;)).classList.add(&#39;active&#39;);
  11.   })
  12. }

这是一个可运行的示例。

  2. <details>
  3. <summary>英文:</summary>
  5. I would create a container to hold the contents of each slide and link buttons to a slide using a data attribute. When a button is clicked, you can remove the active class of the previous slide and add a new one for the current slide. Here is the relevant code that I added with a Codepen link at the bottom.

<div class="active-link" id="active-link">
<li>
<a class="button" data-slide="slide-container-1">1</a>
</li>
<li>
<a class="button active" data-slide="slide-container-2">2</a>
</li>
<li>
<a class="button" data-slide="slide-container-3">3</a>
</li>
</div>

<div class="slide-containers">
<div id="slide-container-1" class="slide-container">
Slide Container 1
</div>
<div id="slide-container-2" class="slide-container">
Slide Container 2
</div>
<div id="slide-container-3" class="slide-container">
Slide Container 3
</div>
</div>

.slide-container {
position: relative;
// I'm not sure what you're looking for visually so I just used a top position greater than what you're already using on the buttons.
top: 14rem;
display: none;
}

.slide-container.active {
display: block;
}

const resetSlideContainers = () => {
[ ...document.querySelectorAll('.slide-container') ].forEach((slide) => slide.classList.remove('active'));
}

for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function(e) {
removeClass('.button', 'active')
this.classList.toggle('active');
resetSlideContainers();
document.getElementById(this.getAttribute('data-slide')).classList.add('active');
})
}

  2. [Here is a working example](https://codepen.io/chadaort/pen/RwBKyxx).
  4. </details>

huangapple
  • 本文由 发表于 2023年1月9日 07:07:08
  • 转载请务必保留本文链接：https://go.coder-hub.com/75051928.html
  • css
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定