个人中心
gpt4 book ai didi

javascript - jQuery 移动选项卡和 anchor

转载 作者：行者123 更新时间：2023-12-02 19:24:32 26 4
gpt4 key购买 nike

我想使用 jQuery Mobile 创建一个选项卡式移动页面。我已经掌握了创建选项卡(例如 Tab1、Tab2、Tab3、Tab4)以及让每个选项卡加载新内容页面的基础知识。 我将如何在特定选项卡中使用 anchor ？例如，如果有人想要为将他们直接带到 Tab4 Anchor1 的链接添加书签。

我对 JavaScript 和 jQuery 还很陌生。

代码如下:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css">
<!-- JavaScript HTML requirements -->
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>
</head>

<body>
<div data-role="page" data-theme="d" id="home" data-id="nav">
  <header data-role="header" >
    <h1>TEST</h1>
    <div data-role="navbar" data-id="nav">
      <ul>
        <li><a href="#home" data-icon="home" data-theme="d" class="ui-btn-active ui-state-persist" >Home</a></li>
        <li><a href="#speakers" data-icon="star" data-theme="d">Speakers</a></li>
        <li><a href="#" data-icon="grid" data-theme="d">News</a></li>
      </ul>
    </div>
  </header>
  <section data-role="content"> Home </section>
  <footer data-role="footer" class="ui-bar"> <a href="" data-icon="gear" class="ui-btn-right">Buy Tickets</a> </footer>
</div>
<div data-role="page" data-theme="d" id="speakers">
  <header data-role="header" data-id="nav" >
    <h1>TEST</h1>
    <div data-role="navbar" >
      <ul>
        <li><a href="#home" data-icon="home" data-theme="d">Home</a></li>
        <li><a href="#speakers" data-icon="star" data-theme="d"
        class="ui-btn-active ui-state-persist">Speakers</a></li>
        <li><a href="#" data-icon="grid" data-theme="d">News</a></li>
      </ul>
    </div>
  </header>
  <section data-role="content">The name attribute specifies the name of an anchor.

The name <a href="#jib">attribute</a> is used to create a bookmark inside an HTML document.

Note: The upcoming HTML5 standard suggests using the id attribute instead of the name attribute for specifying the name of an anchor. Using the id attribute actually works also for HTML4 in all modern browsers.

Bookmarks are not displayed in any special way. They are invisible to the reader. <a name="jib"></a> Speakers </section>
  <footer data-role="footer" class="ui-bar"> <a href="" data-icon="gear" class="ui-btn-right">Buy Tickets</a> </footer>
</div>
</body>
</html>

最佳答案

我想我明白了，但如果我误解了你的问题，请随时发表评论。

我相信您误解了内部 JQuery 链接的工作原理。首先是看一下 JQuery Mobile 页面剖析，特别是您案例中的“多页面模板结构”: http://jquerymobile.com/test/docs/pages/page-anatomy.html

基本上，页面的每个“嵌入页面中间”部分都需要是一个独立的 div，并标有 data-role="page"标签。它的 ID 将是您将指向的 anchor 。

所以为了您的内部<a href="#jib">要工作，您必须有一个 ID =“jib”的内置 div

评论后更新答案

您正在寻找的是 $.mobile.silentScroll 。您想要获取 anchor 链接的 Y 位置，然后让页面滚动到该位置。不过有一个小问题。由于页面转换时会发生 JQuery Mobile 动画，因此您需要在滚动发生之前添加一点暂停。

function loadJib()
{
  $.mobile.changePage('#jib',{transition:"slide"});

  var yPos = $('#mylink').get(0).offsetTop;

  setTimeout(function(){
    $.mobile.silentScroll(yPos);
  },800);

看看我是如何做到的(0.8 秒延迟):

http://jsbin.com/ahevav/3/edit

关于javascript - jQuery 移动选项卡和 anchor ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12181586/

26 4 0
文章推荐： javascript - Ember.js 文本突出显示为粉红色
文章推荐： netbeans - 如何保存时编译？
文章推荐： yaml-cpp - 如何设置yaml-cpp节点样式？
文章推荐： javascript - jquery 中的实时和触发
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com