Question

我正在尝试更改我网站上的设置内容，无法让脚本正常工作，有人可以提供帮助。让我们说的内容是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>

感谢您的帮助。

Answer 1

听起来你需要：

包括页面上的第2-4项
隐藏相应的项目（css display：none）
点击＆＃34;阅读更多＆＃34;链接显示下一个项目。

Answer 2

也许你正在寻找......

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

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

使用fadeIn（）显示隐藏的文章，使用hide（）隐藏其他文章。使用Bootstrap

选项卡还有其他方法

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

Answer 3

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

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

-cheers mate。

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

3 个答案: