jQuery单击上下移动时,简单的垂直上一个和下一个按钮代码

Anahit Ghazaryan

我已经用这个简单的代码创建了一个滑块

jQuery(".article_single_item .article_singlepage_title a:first").parent().parent().addClass("activeTab");
    jQuery(".accomdation_tab:first").addClass("active_tab_content");
    jQuery(".article_single_item .article_singlepage_title a").click(function(event) {
        event.preventDefault();
        $(this).parent().parent().addClass("activeTab");
        $(this).parent().parent().siblings().removeClass("activeTab"); 
        var tab = $(this).attr("href");
        $(".accomdation_tab").not(tab).css("display", "none");
        $(tab).fadeIn();
    });

使用此代码,我可以在单击时显示每个项目的以下内容。现在,我也需要创建“上一个”和“下一个”按钮的功能,单击“下一步”时,它必须滚动或移动下一个项目等。我正在尝试使用此代码

jQuery('#single_article_next').click(function(){
        jQuery(".article_single_item .article_singlepage_title a").parent().parent().siblings().removeClass("activeTab"); 
        jQuery(".article_single_item .article_singlepage_title a:first").parent().parent().next().addClass("activeTab");
        jQuery(".accomdation_tab").siblings().removeClass("active_tab_content"); 
        jQuery('.accomdation_tab:first').next().addClass("active_tab_content"); 
    });
    jQuery('#single_article_prev').click(function(){
        jQuery(".article_single_item .article_singlepage_title a").parent().parent().siblings().removeClass("activeTab"); 
        jQuery(".article_single_item .article_singlepage_title a:first").parent().parent().prev().addClass("activeTab");
        jQuery(".accomdation_tab").siblings().removeClass("active_tab_content"); 
        jQuery('.accomdation_tab:first').prev().addClass("active_tab_content"); 
    });

但这不是我所需要的并且不能正常工作。帮我弄清楚。

脱水

要实现next/prev功能,必须activeTab使下一个/上一个激活,并使其处于活动状态,如下所示。

请注意,我更换了.article_single_item.activeTab采取主动a

var $activeTab = jQuery(".activeTab .article_singlepage_title a"); 

下面的代码用于下一个/上一个功能。我提取了function中一些常见功能的一部分tabChange()

jQuery('#single_article_next').click(function(){
    var $activeTab = jQuery(".activeTab .article_singlepage_title a"); 
    $activeTab.parent().parent().next().siblings().removeClass("activeTab"); 
    $activeTab.parent().parent().next().addClass("activeTab");

    $activeTab = jQuery(".activeTab .article_singlepage_title a");
    tabChange($activeTab) 
});
jQuery('#single_article_prev').click(function(){
    var $activeTab = jQuery(".activeTab .article_singlepage_title a"); 
    $activeTab.parent().parent().prev().siblings().removeClass("activeTab"); 
    $activeTab.parent().parent().prev().addClass("activeTab");

    $activeTab = jQuery(".activeTab .article_singlepage_title a");
    tabChange($activeTab) 
});

function tabChange($activeTab) {
    var tab = $activeTab.attr("href");
    $(".accomdation_tab").not(tab).css("display", "none");
    $(tab).fadeIn();
}

有关工作示例,请参见代码段

jQuery(".article_single_item .article_singlepage_title a:first").parent().parent().addClass("activeTab");
jQuery(".accomdation_tab:first").addClass("active_tab_content");
jQuery(".article_single_item .article_singlepage_title a").click(function(event) {
  event.preventDefault();
  $(this).parent().parent().addClass("activeTab");
  $(this).parent().parent().siblings().removeClass("activeTab");
  tabChange($(this))
});


jQuery('#single_article_next').click(function() {
  var $activeTab = jQuery(".activeTab .article_singlepage_title a");
  $activeTab.parent().parent().next().siblings().removeClass("activeTab");
  $activeTab.parent().parent().next().addClass("activeTab");
  
  $activeTab = jQuery(".activeTab .article_singlepage_title a");
  tabChange($activeTab)
});
jQuery('#single_article_prev').click(function() {
  var $activeTab = jQuery(".activeTab .article_singlepage_title a");
  $activeTab.parent().parent().prev().siblings().removeClass("activeTab");
  $activeTab.parent().parent().prev().addClass("activeTab");

  $activeTab = jQuery(".activeTab .article_singlepage_title a");
  tabChange($activeTab)
});

function tabChange($activeTab) {

  var tab = $activeTab.attr("href");
  $(".accomdation_tab").not(tab).css("display", "none");
  $(tab).fadeIn();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-7 column" style="float:none;margin:auto;">
  <div class="solutions_single_title">
    Solutions</div>
  <div class="single_sol_content">
    <p>We feel the best way to show you our solutions is to tell the stories of how our client successfully structured investment products using Exchange Traded Instruments (ETIs)</p>
  </div>
  <div class="col-md-4 single_solution_ipad_leftcol">
    <div class="article_scroll_list">
      <div class="other_art_title">Other Solutions</div>
      <div class="article_scroll_content">
        <div class="article_single_item activeTab">
          <div class="article_singlepage_title"><a href="#solution_1">Private Equity</a>
          </div>
        </div>
        <div class="article_single_item">
          <div class="article_singlepage_title"><a href="#solution_2">The New Manager</a>
          </div>
        </div>
        <div class="article_single_item">
          <div class="article_singlepage_title"><a href="#solution_3">SME Financing</a>
          </div>
        </div>
        <div class="article_single_item">
          <div class="article_singlepage_title"><a href="#solution_4">The UCITS Fund</a>
          </div>
        </div>
      </div>

      <div class="article_list_border"></div>
      <span id="single_article_prev">
							<img src="http://argentarius.ipoint.com.mt/wp-content/themes/argentarius/images/article_arrow_down.png" alt="article" class="arrow_down">
							<img src="http://argentarius.ipoint.com.mt/wp-content/themes/argentarius/images/article_arrow_down_hover.png" alt="article" class="arrow_down_hover">
						</span>
      <span id="single_article_next">
							<img src="http://argentarius.ipoint.com.mt/wp-content/themes/argentarius/images/article_arrow_up.png" alt="article" class="arrow_up">
							<img src="http://argentarius.ipoint.com.mt/wp-content/themes/argentarius/images/article_arrow_up_hover.png" alt="article" class="arrow_up_hover">
						</span> 
    </div>
  </div>
  <div class="col-md-8 single_solution_ipad_rightcol">
    <div id="solution_1" class="accomdation_tab active_tab_content" style="">
      <div class="sigle_socenario_maintitle">
        Private Equity
      </div>
      <div class="article_maincontent">
        <p>A private equity manager based in a non EU jurisdiction consulted Argentarius to securitise a portfolio of investments in&nbsp;European SMEs with a listing on the Deutsche Börse and targeting professional investors in the EU.</p>
      </div>
      <div class="sigle_socenario_maintitle">
        Own Issuer Vehicle</div>
      <div class="article_maincontent">
        <p>Argentarius created a branded Own Issuer Securitisation Cell Company for the manager to use as an EU base for investment opportunities.</p>
      </div>
    </div>
    <div id="solution_2" class="accomdation_tab" style="display: none;">
      <div class="sigle_socenario_maintitle">
        The new manager
      </div>
      <div class="article_maincontent">
        A new start up long/short equity manager consulted Argentarius to securitise a trading account at a multi-asset prime broker and with an ETI listed on the Deutsche Börse for the initial funding to be received from professional investors. Costs were a
        prime concern here as the starting AUM was below 5 million euros. &nbsp;</div>
      <div class="sigle_socenario_maintitle">
        Fast and cost effective</div>
      <div class="article_maincontent">
        Our transparent cost structure meant that the new start up manager had control of their structuring costs from the start. Furthermore the ongoing management costs were clearly defined and the new manager could allocate the costs within the total management
        fee for the strategy.</div>
    </div>
    <div id="solution_3" class="accomdation_tab" style="display: none;">
      <div class="sigle_socenario_maintitle">
        SME Financing
      </div>
      <div class="article_maincontent">
        An asset manager securitised a portfolio of unlisted bonds arranged with European SMEs looking for new funding and listed it on the European Wholesale Securities Market as a target for professional investors and UCITS funds. The UCITS fund manager is
        therefore able to gain exposure to high yielding SME bonds that are managed by the fund manager through a power of attorney granted by the Special Investment Vehicle that forms part of the securitisation structure.</div>
      <div class="sigle_socenario_maintitle">
        SME Financing ETI</div>
      <div class="article_maincontent">
        A key requirement with this ETI was the cost of running the portfolio needed to be kept to a minimum and this was achieved by structuring the management of the SME Bonds through a Special Investment Vehicle (SIV) created as a 100% subsidiary of the Securitisation
        Cell Company. The selection of the bonds and the management of the repayments was directly handled by the UCITS fund manager under a power of attorney granted by the SIV.</div>
    </div>
    <div id="solution_4" class="accomdation_tab" style="display: none;">
      <div class="sigle_socenario_maintitle">
        The UCITS Fund seeking exposure to alternative investments
      </div>
      <div class="article_maincontent">
        A large UCITS fund manager securitised both an FX trading account and a Commodity Futures trading account with two separate brokers to achieve diversification for the fund. The ETI was listed on the European Wholesale Securities Market. The UCITS fund
        manager needed to be satisfied that the ETI met all the requirements of eligibility of assets, in addition to ensuring that no more than 10% of the AUM of the fund was invested within the ETI. The issuing Securitisation Cell Company had issued
        several hundred million Euros in securities and thus the UCITS fund manager was able to confirm that not more than 10% of the issuance of the Securitisation Cell Company had been purchased.</div>
      <div class="sigle_socenario_maintitle">
        The UCITS ETI</div>
      <div class="article_maincontent">
        The European Wholesale Securities Market is a joint venture between the Irish and Malta Stock Exchanges and offers an excellent venue for the listing of eligible UCITS assets that are backed by alternative investment portfolios.</div>
    </div>
  </div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

轮播下一个上一个按钮的上下移动如何解决?

单击上一个和下一个按钮时,react.js 中的卡片转换

单击角度 2 中的上一个和下一个按钮时的下拉值更改

单击上一个和下一个按钮时,FullCalendar进入议程视图

按下上一个和下一个按钮时,模拟元素列表中的元素单击

在单击滑块下一个和上一个按钮时,我得到 $curr[action] is not a function

jQuery的简单下一个和上一个显示和隐藏

当我单击“下一个/上一个”按钮时,jQuery DatePicker消失

JQuery Full Calendar:“上一个”和“下一个”按钮上的某些单击将被忽略

使用 jquery 在分页时激活下一个/上一个按钮

单击下一个和上一个按钮时如何在JQuery中访问动态生成的div元素值

jQuery的下一个和上一个按钮

jQuery分页的下一个和上一个按钮不起作用

简单的上一个/下一个按钮

简单的画廊下一个上一个按钮背景图像

移动浏览器中“上一个”和“下一个”按钮的标准

fancybox下一个和上一个按钮在移动设备中不起作用

JavaScript-使用下一个和上一个按钮在数组中移动

单击下一个或上一个按钮时多次刷新页面

单击幻灯片上的下一个或上一个按钮时创建新的间隔

如何在单击按钮时从微调器中获取下一个/上一个项目?

使用React Hooks单击上一个/下一个按钮时在div之间切换

angularjs单击按钮显示下一个/上一个div

如何仅通过单击下一个和上一个按钮来更改轮播的内容?

完整日历-单击上一个或下一个按钮后如何获得年份和月份?

jQuery datepicker将单击事件添加到上一个下一个按钮

单击下一个按钮时显示下一个问题

jQuery滑块在上一个或最后一个时隐藏上一个和下一个

在React应用中从模态内部单击下一个和上一个按钮时,无法使动画(淡入)在模态上工作