在网站上使用JS更改设置内容

Changing set contents using JS on website

本文关键字：设置 JS 网站      更新时间：2023-09-26

我正在尝试更改我的网站上的一组内容，但无法使脚本正常工作，有人可以帮忙吗？内容为4，并具有以下代码。我想使用按钮在1,2,3和4之间切换。

我知道一个简单的 addClass 和 removeClass 可以解决问题，但无法让它工作。下面是一组示例内容：

<ul>
  <li class="article-list-vertical-1">
    <a href="#" style="background-image: url('/img.jpg')"></a>
    <div>
      <h2>Article title #1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu lacus mattis laoreet diam a volutpat magna.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu lacus mattis laoreet diam a, volutpat magna.</p>
      <a href="#" class="read-more">Read more &nbsp; <i class="fa fa-chevron-right"></i></a>
    </div>
  </li>
</ul>

谢谢你的帮助。

也许这就是你要找的...

https://plnkr.co/edit/BAxRkGJORf2tMt1LFrxK?p=preview

$("#link1").click(function() {
   $("#list-1").fadeIn();
   $("#list-2").hide();
   $("#list-3").hide();
   $("#list-4").hide();
});
使用

fadeIn（） 显示隐藏的文章，使用 hide（） 隐藏其他文章。还有其他方法通过引导使用选项卡

http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-tabs.php

你可以试试这个。在锚点上添加了点击事件，然后检查点击了哪一个，以确定要根据锚点显示的文章。

  $(".article-link").on('click',function(e){
e.preventDefault();
var whichLink = $( this ).index()+1;
if( currentArticle != whichLink){
    $('.article-list-vertical-1').each(function(){
      if($( this ).css('display') == 'block'){
        $( this ).animate({opacity:0},function(){
          $( this ).css({"display":"none"});

          $('#list-'+whichLink).css({"display":"block",opacity:0});
          $('#list-'+whichLink).animate({opacity:1},function(){
            currentArticle = whichLink;
          });
        })
      }
    });
}

}）;

使用此选项，您可以轻松添加更多文章，而无需更改"单击"处理程序。

在这里工作：https://plnkr.co/edit/SotgGJVFgR9QtsFBHrSS?p=preview

-干杯伴侣。

听起来你需要

：

  • 在页面上包括项目 2-4
  • 隐藏相应的项目（CSS 显示：无）
  • 单击"阅读更多"链接显示下一项。
相关文章：