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"); 

아래 코드는 다음 / 이전 기능에 대한 것입니다. 기능에서 공통 기능의 일부를 추출했습니다 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리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

버튼 클릭시 다음 행으로 이동하기위한 코드 생성

분류에서Dev

클릭시 위아래로 움직이는 div를 만드는 방법

분류에서Dev

간단한 HTML 및 JS 로그인 페이지가 작동하지 않음, 버튼 클릭시 이메일 및 비밀번호 필드를 가져올 수 없음

분류에서Dev

버튼 클릭시 양식 추가, 두 번째 클릭시 아래로 슬라이드 및 위로 슬라이드

분류에서Dev

이전 및 이미 작동중인 코드를 사용했지만 포인터가 위아래로 움직이지 않음

분류에서Dev

내 이전 및 다음 버튼은 단어 본문이 큰 다음 페이지로 이동할 때 위아래로 변동하는 경향이 있습니다.

분류에서Dev

클릭 이벤트는 응용 프로그램을 시작한 직후에 전송됩니다 (PySide 및 Python).

분류에서Dev

JQuery 함수-특정 라디오 버튼에 대해 클릭 및 페이지로드시 실행

분류에서Dev

클릭 한 다음 위로 이동, 다시 클릭 한 다음 아래로 이동

분류에서Dev

드롭 다운 선택시 다른보기로 이동 한 다음 버튼 클릭

분류에서Dev

위아래로 움직이는 커서

분류에서Dev

뒤로 버튼 클릭시 로그 아웃 후 jsp 페이지 다시로드

분류에서Dev

UIPageControl-버튼 클릭시 페이지 다시로드

분류에서Dev

버튼 클릭시 움직이는 Android 이미지

분류에서Dev

버튼 클릭 후 사이트가 다시로드되지 않음

분류에서Dev

jQuery 변경 선택 옵션 다음 이전 버튼 및 콘텐츠로드

분류에서Dev

버튼 클릭시 이미지 표시 및 iframe로드시 숨기기

분류에서Dev

버튼 항목이있는 부트 스트랩 드롭 다운 및 버튼 클릭시 프로그래밍 방식으로 닫힘

분류에서Dev

줄 높이 변경시 버튼 하나를 클릭하면 인접한 버튼과 버튼 아래 텍스트가 아래로 이동합니다.

분류에서Dev

간단한 작업 : 실제로 버튼을 클릭 할 필요없이 "시도"를 클릭 한 후 발생하는 작업을 원합니다.

분류에서Dev

클릭시 div를 아래로 슬라이드하고 버튼 아이콘을 변경합니다.

분류에서Dev

HTML에서 로그인 버튼을 클릭 한 후 new_url로 이동할 수없는 이유는 무엇입니까? 아래에 주어진 코드

분류에서Dev

다음 및 이전 링크로 간단한 탭을 만드는 방법

분류에서Dev

Android Spinner : 버튼 클릭시 다음 항목으로 이동

분류에서Dev

버튼 클릭시 다음 활동으로 이동

분류에서Dev

버튼 클릭시 숨겨진 div를 위 / 아래로 슬라이드하는 방법은 무엇입니까?

분류에서Dev

버튼을 무작위로 움직이는 방법

분류에서Dev

JQuery Full Calendar : 이전 및 다음 버튼에서 일부 클릭이 무시됩니다.

분류에서Dev

Perfom ASP 버튼 클릭, VB 코드 처리 및 페이지 새로 고침없이 Jscript 수행

Related 관련 기사

  1. 1

    버튼 클릭시 다음 행으로 이동하기위한 코드 생성

  2. 2

    클릭시 위아래로 움직이는 div를 만드는 방법

  3. 3

    간단한 HTML 및 JS 로그인 페이지가 작동하지 않음, 버튼 클릭시 이메일 및 비밀번호 필드를 가져올 수 없음

  4. 4

    버튼 클릭시 양식 추가, 두 번째 클릭시 아래로 슬라이드 및 위로 슬라이드

  5. 5

    이전 및 이미 작동중인 코드를 사용했지만 포인터가 위아래로 움직이지 않음

  6. 6

    내 이전 및 다음 버튼은 단어 본문이 큰 다음 페이지로 이동할 때 위아래로 변동하는 경향이 있습니다.

  7. 7

    클릭 이벤트는 응용 프로그램을 시작한 직후에 전송됩니다 (PySide 및 Python).

  8. 8

    JQuery 함수-특정 라디오 버튼에 대해 클릭 및 페이지로드시 실행

  9. 9

    클릭 한 다음 위로 이동, 다시 클릭 한 다음 아래로 이동

  10. 10

    드롭 다운 선택시 다른보기로 이동 한 다음 버튼 클릭

  11. 11

    위아래로 움직이는 커서

  12. 12

    뒤로 버튼 클릭시 로그 아웃 후 jsp 페이지 다시로드

  13. 13

    UIPageControl-버튼 클릭시 페이지 다시로드

  14. 14

    버튼 클릭시 움직이는 Android 이미지

  15. 15

    버튼 클릭 후 사이트가 다시로드되지 않음

  16. 16

    jQuery 변경 선택 옵션 다음 이전 버튼 및 콘텐츠로드

  17. 17

    버튼 클릭시 이미지 표시 및 iframe로드시 숨기기

  18. 18

    버튼 항목이있는 부트 스트랩 드롭 다운 및 버튼 클릭시 프로그래밍 방식으로 닫힘

  19. 19

    줄 높이 변경시 버튼 하나를 클릭하면 인접한 버튼과 버튼 아래 텍스트가 아래로 이동합니다.

  20. 20

    간단한 작업 : 실제로 버튼을 클릭 할 필요없이 "시도"를 클릭 한 후 발생하는 작업을 원합니다.

  21. 21

    클릭시 div를 아래로 슬라이드하고 버튼 아이콘을 변경합니다.

  22. 22

    HTML에서 로그인 버튼을 클릭 한 후 new_url로 이동할 수없는 이유는 무엇입니까? 아래에 주어진 코드

  23. 23

    다음 및 이전 링크로 간단한 탭을 만드는 방법

  24. 24

    Android Spinner : 버튼 클릭시 다음 항목으로 이동

  25. 25

    버튼 클릭시 다음 활동으로 이동

  26. 26

    버튼 클릭시 숨겨진 div를 위 / 아래로 슬라이드하는 방법은 무엇입니까?

  27. 27

    버튼을 무작위로 움직이는 방법

  28. 28

    JQuery Full Calendar : 이전 및 다음 버튼에서 일부 클릭이 무시됩니다.

  29. 29

    Perfom ASP 버튼 클릭, VB 코드 처리 및 페이지 새로 고침없이 Jscript 수행

뜨겁다태그

보관