简单的垂直上一个和下一个按钮代码点击上下移动jQuery
Simple Vertical Prev and Next buttons code on click moving up and down with jQuery
我用这个简单的代码创建了一个滑块
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
并激活下一个/上一个,如下所示。
请注意,我用.activeTab
替换了.article_single_item
,以获得活动的a
。
var $activeTab = jQuery(".activeTab .article_singlepage_title a");
下面的代码用于next/prev功能。我提取了函数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 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. </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>
这样包装文章
<div class="article_scroll_content">
<ul id="article_title_list">
<li class="article_title">
<div class="article_single_item activeTab">
<div class="article_singlepage_title"> <a href="#solution_1">Private Equity</a>
</div>
</div>
</li>
<li class="article_title">
<div class="article_single_item">
<div class="article_singlepage_title"> <a href="#solution_2">The New Manager</a>
</div>
</div>
</li>
<li class="article_title">
<div class="article_single_item">
<div class="article_singlepage_title"> <a href="#solution_3">SME Financing</a>
</div>
</div>
</li>
<li class="article_title">
<div class="article_single_item">
<div class="article_singlepage_title"> <a href="#solution_4">The UCITS Fund</a>
</div>
</div>
</li>
</ul>
</div>
然后你可以使用一些更好的代码,比如这样
$(function () {
var $allTtitles = $('li.article_title');
var titleCount = $('li.article_title').length;
$('#title_count').html(titleCount);
var newActiveTitleIdx = 0;
var titleActiveIdx = 0;
function titleListUp() {
titleActiveIdx = $('li.article_title .active_title').index();
$allTitles.removeClass('active_title');
if (titleActiveIdx === 0) {
newActiveTitleIdx = titleCount - 1;
} else {
newActiveTitleIdx--;
}
$('#art_idx').html(newActiveTitleIdx);
$allTtitles.eq(newActiveTitleIdx).addClass('active_title');
}
function titleListDown() {
titleActiveIdx = $('li.article_title .active_title').index();
$allTitles.removeClass('active_title');
if (titleActiveIdx == (titleCount - 1) ) {
newActiveTitleIdx = 0;
} else {
newActiveTitleIdx++;
}
$('#art_idx').html(newActiveTitleIdx);
$allTtitles.eq(newActiveTitleIdx).addClass('active_title');
}
$('#single_article_prev').on('click', function () {
titleListUp();
});
$('#single_article_next').on('click', function () {
titleListDown();
});
});
相关文章:
- 简单的垂直上一个和下一个按钮代码点击上下移动jQuery
- I'我试图在我的网页上动态地上下移动元素.我该怎么做
- 如何使我的功能360度旋转并上下移动
- 在选定元素中上下移动选项的方式
- Magic Line在使用键盘上下移动时未使用fullPage.js进行更新
- 动态上下移动表单字段
- 崇高文本 直接在标签之间上下移动光标
- Snake javascript,上下移动,使块大于5px
- MVC 剃刀列表项上下移动
- 如何在上下移动时免除第一行,或者如何自动排列编号
- 如何在html中上下移动项目
- 在基于javascript的画布游戏中上下移动
- 根据我在代码中输入的圆柱体高度和变量值上下移动画布
- 就像Javascript的初学者一样,我试图创建一个代码来允许对象在y轴和x轴上上下移动
- 根据页面加载的可变值上下移动画布线,并实现平滑过渡
- 光线如何?项目在没有CSS位置或margin-top的情况下上下移动
- 循环图像上下移动与jquery
- 如何使用angular js上下移动项目
- Yii CGridView使用键盘's箭头上下移动选定行
- 按钮可以根据用户的位置上下移动