我有以下代码，并且需要任何方法来简化onclick函数，而不是重复多次。
function onLoadHandler() {
var st1 = $("#i11031821").contents().find("p:contains('Application and Acceptance of')");
var st2 = $("#i11031821").contents().find("p:contains('Provision of Services')");
var st3 = $("#i11031821").contents().find("p:contains('Users Generally')");
var st4 = $("#i11031821").contents().find("p:contains('Member Accounts')");
var st5 = $("#i11031821").contents().find("p:contains('Member’s Responsibilities')");
var st6 = $("#i11031821").contents().find("p:contains('Breaches by Members')");
var st7 = $("#i11031821").contents().find("p:contains('Transactions Between Buyers and')");
var st8 = $("#i11031821").contents().find("p:contains('Limitation of Liability')");
var st9 = $("#i11031821").contents().find("p:contains('Force Majeure')");
var st10 = $("#i11031821").contents().find("p:contains('Intellectual Property Rights')");
var st11 = $("#i11031821").contents().find("p:contains('Notices')");
var st12 = $("#i11031821").contents().find("p:contains('General Provisions')");
var st21 = $("#i11022249").contents().find("p:contains('1. Application')");
var st22 = $("#i11022249").contents().find("p:contains('2. Provision')");
var st23 = $("#i11022249").contents().find("p:contains('3. Users')");
var st24 = $("#i11022249").contents().find("p:contains('4. Member')");
var st25 = $("#i11022249").contents().find("p:contains('5. Member’s')");
var st26 = $("#i11022249").contents().find("p:contains('6. Breaches')");
var st27 = $("#i11022249").contents().find("p:contains('7. Transactions')");
var st28 = $("#i11022249").contents().find("p:contains('8. Limitation')");
var st29 = $("#i11022249").contents().find("p:contains('9. Force')");
var st30 = $("#i11022249").contents().find("p:contains('10. Intellectual')");
var st31 = $("#i11022249").contents().find("p:contains('11. Notices')");
var st32 = $("#i11022249").contents().find("p:contains('12. General')");
$(st1).on('click', function(event) {
$('html, body').animate({
scrollTop: $(st21).offset().top
}, 2000);
});
$(st2).on('click', function(event) {
$('html, body').animate({
scrollTop: $(st22).offset().top
}, 2000);
});
$(st3).on('click', function(event) {
$('html, body').animate({
scrollTop: $(st23).offset().top
}, 2000);
});
$(st4).on('click', function(event) {
$('html, body').animate({
scrollTop: $(st24).offset().top
}, 2000);
});
$(st5).on('click', function(event) {
$('html, body').animate({
scrollTop: $(st25).offset().top
}, 2000);
});
$(st6).on('click', function(event) {
$('html, body').animate({
scrollTop: $(st26).offset().top
}, 2000);
});
$(st7).on('click', function(event) {
$('html, body').animate({
scrollTop: $(st27).offset().top
}, 2000);
});
$(st8).on('click', function(event) {
$('html, body').animate({
scrollTop: $(st28).offset().top
}, 2000);
});
$(st9).on('click', function(event) {
$('html, body').animate({
scrollTop: $(st29).offset().top
}, 2000);
});
$(st10).on('click', function(event) {
$('html, body').animate({
scrollTop: $(st30).offset().top
}, 2000);
});
$(st11).on('click', function(event) {
$('html, body').animate({
scrollTop: $(st31).offset().top
}, 2000);
});
$(st12).on('click', function(event) {
$('html, body').animate({
scrollTop: $(st32).offset().top
}, 2000);
});
$([st1[0], st2[0], st3[0], st4[0], st5[0], st6[0], st7[0], st8[0], st9[0], st10[0], st11[0], st12[0]]).css({
"width": "300px",
"padding": "10px",
"border": "solid 1px silver",
"margin-bottom": "2px",
"box-shadow": " 0px 0px 5px silver",
"cursor": "pointer"
});
}
就像在您的问题下方的评论中说的那样：“这是html中锚标记的工作”。
但是您不会产生动画效果，这显然是您想要的。
这是我看不见HTML的最佳答案。
我在Toc这里使用了类“ ”作为目录标题...，在
这里我用了“ Content”作为内容标题...
但是您可以根据需要命名它们；）
这些类将定义CSS ，并将用作jQuery中的选择器。
定义CSS，最好在<head>文档的部分中定义。
这是我的建议：
<style>
.Toc{
/* Define the CSS specific to the TOC heading here */
/* Here is my inpiration for the example */
font-weight:bold;
text-shadow:2px 3px #ccc;
cursor: pointer;
}
.Content{
width: 300px;
padding: 10px;
border: solid 1px silver;
margin-bottom: 2px;
box-shadow: 0px 0px 5px silver;
cursor: pointer;
}
</style>
jQuery的脚本：
$(".Toc, .Content").on('click', function() {
// Get the title clicked... Either in TOC or Content.
var thisTitle = $(this).html();
var thisContent;
// Find the relative content.
$(".Content").each(function(){
if( $(this).html() == thisTitle ){
thisContent = $(this);
}
});
// Animate to content.
$('html, body').animate({
scrollTop: thisContent.offset().top
}, 2000);
});
请注意，第一个$(this)选择器代表单击的元素。
当第二个代表被检查元素时，每个循环都会迭代一次。
还要注意，TOC和内容中的标题必须与该脚本完全相同。
无论如何，这种文档应该是这种情况。
CSS：
.backtoTOC{
/* Here is my inpiration for the "back to TOC link" */
color:#c44;
width:calc(100% - 1em);
text-align:right;
margin-right:1em;
cursor: pointer;
}
脚本：
$(".backtoTOC").click(function(){
$('html, body').animate({
scrollTop: 0
}, 2000);
});
查看在CodePen中运行的所有这些代码。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句