Javascript 在网站上使用JS更改集合内容_Javascript_Jquery_Html_Css

Javascript 在网站上使用JS更改集合内容

javascript jquery html css

Javascript 在网站上使用JS更改集合内容,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在尝试更改网站上的一组内容，但无法使脚本正常工作，是否有人可以帮助我。假设内容是4个数字，并具有以下代码。我想使用按钮1、2、3和4在这些内容之间切换我知道一个简单的addClass和removeClass可以做到这一点，但无法让它正常工作。以下是一组内容示例：文章标题#1 Lorem ipsum dolor sit amet，是一位杰出的献身者。悬而未决的是，它的存在是一个巨大的漩涡，它的存在是一个进步的精英。欧盟的悬而未决的缺陷在于，它的直径为1毫米，体积为1毫米听起来您

我正在尝试更改网站上的一组内容，但无法使脚本正常工作，是否有人可以帮助我。假设内容是4个数字，并具有以下代码。我想使用按钮1、2、3和4在这些内容之间切换

我知道一个简单的addClass和removeClass可以做到这一点，但无法让它正常工作。以下是一组内容示例：



文章标题#1
Lorem ipsum dolor sit amet，是一位杰出的献身者。悬而未决的是，它的存在是一个巨大的漩涡，它的存在是一个进步的精英。欧盟的悬而未决的缺陷在于，它的直径为1毫米，体积为1毫米

听起来您需要：

在页面上包括项目2-4
隐藏适当的项目（css显示：无）
点击“阅读更多”链接，显示下一项

听起来您需要：

在页面上包括项目2-4
隐藏适当的项目（css显示：无）
点击“阅读更多”链接，显示下一项

  $(".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;
          });

        })
      }
    });
}

  $(".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;
          });

        })
      }
    });
}