个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在创建一个包含 anchor 作为菜单项的单页 HTML 页面。我找到了有助于简化整个页面向 anchor 过渡的代码。这是平滑过渡的代码:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1500);
return false;
}
}
});
});
</script>
`在我的单页 HTML 页面的一部分，我想使用选项卡 jquery 代码来显示信息。我的问题是，由于转换 jquery 代码(上面)，选项卡 jquery(下面的代码)似乎有问题。有时，点击选项卡后，上面的功能不起作用。我的 ChrisPederick 工具栏没有显示任何 JavaScript 错误。我真的很感激任何关于如何解决这个问题的意见。
下面是我的标签 javascript 的代码。目前，我的一页 HTML 页面中的选项卡 javascript 直接位于我的选项卡 div 之前，这意味着 javascript 代码位于 <body> 中。标签:
<script>
$(function() {
$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
});
</script>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Alcohol & College Life</a></li>
<li><a href="#tabs-2">Financial Fitness</a></li>
</ul>
<div id="tabs-1">
<p>Sample topics:
<ul>
<li>Alcohol, tobacco, marijuana and other drugs</li>
<li>Harm reduction and party skills</li>
</ul>
</p>
</div>
<div id="tabs-2">
<p>Sample topics:
<ul>
<li>Topic 1</li>
<li>Topic 2</li>
</ul>
</p>
</div>
</div>
最佳答案
实际上，平滑滚动的 jQuery 代码不应该应用于选项卡。因此，以这种方式更改平滑滚动 jQuery 代码:
$(function() {
$('a[href*=#]:not([href=#]):not(#tabs ul li a)').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1500);
return false;
}
}
});
});
关于javascript - 一页 HTML 页面上的两套 Jquery cody，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34167013/
25
4
0
我是一名优秀的程序员,十分优秀！