Question

我的侧边栏在iPad屏幕上消失，而较小的侧边栏则被下一个和上一个箭头取代。

基本上，我想获取当前页面URL，将其从域中剪切并将其与侧栏中的锚标记进行比较。找到正确的页面后，请填写“之前的”页面。在“当前页面”之前使用锚标记的href图标href。在侧边栏中添加标签并填写下一个＆＃39;图标href与之后的锚标记的href。

sidebar.html （只有几行，但真正的侧边栏要长得多） -

<nav class="main-nav">
<ul class="nav nav-pills nav-stacked">

<li>
<a href="{% url 'index:pg_1' %}" id="sub_1" ><h5>
{{title_1}}<span class=></span></h5></a>
</li>

<li>
<a href="{% url 'index:pg_2' %}" id="sub_1" ><h5>
{{title_2}}<span class=></span></h5></a>
</li>

<li>
<a href="{% url 'index:pg_3' %}" id="sub_1"><h5>
{{title_3}}<span class=></span></h5></a>
</li>

<li>
<a href="{% url 'index:pg_4' %}" id="sub_1"><h5>
{{title_4}}<span class=></span></h5></a>
</li>

图标 -

<i class="fa fa-angle-left fa-5x prev" aria-hidden="true">
  <a class="left" href="#"></a>
</i>
<i class="fa fa-angle-right fa-5x next" aria-hidden="true">
<a href="#" class="right"></a> 
</i>

jQuery -

$(function(){
console.log("nav for sm screens is ready");
// var url; 
var x; 
var url; 
var page_url = window.location.pathname;
page_url.split('/');
console.log(page_url);
url = $("a#sub_1").attr("href"); // Gets all 'a' tags with id of 'sub_1' (all of them) 
console.log("we have urls "); 
for (x in url){                // loops through them
    if (page_url == url){      // matches page url with a url in sidebar 
      console.log("we have a url that is the same as the page url")
      console.log(url)
      if ($(this).closest("li a").prev().length) {  // code usually breaks down here, checking if an anchor tag exists before current selection or not
        console.log("there are no links before this")
        $(".prev").hide();   // if no anchor tag exists before this tag, hide previous.
        console.log("left is hidden");
        $(".right").prop("href", $(this).next("a").prop("href"));  // set 'next' to href of next anchor tag.  
        console.log("we have next link");

      };
    };
};
});

我已尝试使用closest()，parent()，parents()以及其他一些变体，但似乎没有任何效果。

Answer 1

这很模糊，难以找出一个例子。以下是我提出的建议：

https://jsfiddle.net/Twisty/Lrzo071q/8/

<强> HTML

<nav class="main-nav">
  <i class="fa fa-angle-left fa-5x prev" aria-hidden="true"></i>
  <ul class="nav nav-pills nav-stacked">
    <li><a href="./page-1/" id="sub-1" class="sub-link"><h5>1<span class=""></span></h5></a></li>
    <li><a href="./page-2/" id="sub-2" class="sub-link"><h5>2<span class=""></span></h5></a></li>
    <li><a href="./page-3/" id="sub-3" class="sub-link"><h5>3<span class=""></span></h5></a></li>
    <li><a href="./_display/" id="sub-4" class="sub-link"><h5>4<span class=""></span></h5></a></li>
  </ul>
  <i class="fa fa-angle-right fa-5x next" aria-hidden="true"></i>
</nav>

<强>的JavaScript

$(function() {
  console.log("Small Screen Navigation Setup");
  var page_url = window.location.pathname,
    urlParts = page_url.split('/');
  console.log("URL:", page_url, "URL Parts:", urlParts);
  $(".sub-link").each(function(k, el) {
    var href = $(el).attr("href");
    console.log("Compare:", href, "to: ./" + urlParts[1] + "/");
    if (href == "./" + urlParts[1] + "/") { 
      console.log("Target URL found in Window URL");
      console.log("Current URL:", href);
      if ($(el).parent().is("li:last")) {
        console.log("Hidding Next.");
        $(".next").hide();
      }
      if ($(el).parent().is("li:first")) {
        console.log("Hidding Prev.");
        $(".prev").hide();
      }
    } else {
      console.log("Target URL not found.");
    }
  });
});

<强>控制台

Small Screen Navigation Setup
URL: /_display/ URL Parts: Array [ "", "_display", "" ]
Target URLs collected: Array [ "./page-1/", "./page-2/", "./page-3/", "./_display/" ]
Compare: ./page-1/ to: ./_display/
Target URL not found.
Compare: ./page-2/ to: ./_display/
Target URL not found.
Compare: ./page-3/ to: ./_display/
Target URL not found.
Compare: ./_display/ to: ./_display/
Target URL found in Window URL
Current URL: ./_display/
Hidding Next.

这当然会在您的网站上有所不同。如果您包含一些输出示例，则此示例可能更具体。基本上，我们希望将href中的值与当前网址进行比较。使用.each()，我们可以迭代每个<a>，然后将href属性的值与我们从window.location.pathname收集的特定字符串进行比较。

找到匹配后，我们要测试它是:first还是:last元素。我们可以通过使用.is()进行测试来完成此操作。由于我们迭代<a>元素，并且我们需要测试<li>项，因此我们需要使用.parent()查看元素父元素。

您将看到如下输出：

< 1 2 3 4

此示例的第二个测试是将./_display/移动到其他链接：

  <ul class="nav nav-pills nav-stacked">
    <li><a href="./_display/" id="sub-1" class="sub-link"><h5>1<span class=""></span></h5></a></li>
    <li><a href="./page-2/" id="sub-2" class="sub-link"><h5>2<span class=""></span></h5></a></li>
    <li><a href="./page-3/" id="sub-3" class="sub-link"><h5>3<span class=""></span></h5></a></li>
    <li><a href="./page-4/" id="sub-4" class="sub-link"><h5>4<span class=""></span></h5></a></li>
  </ul>

这将有如下输出：

1 2 3 4 >

希望这有帮助。

jQuery - 小屏幕导航。基于当前窗口url的next和prev按钮href？

1 个答案: