【问题标题】:Pass a class to other page on click单击时将课程传递到其他页面
【发布时间】:2019-10-12 17:07:07
【问题描述】:

我有 1 页

<a href="http://example.com/Rank1?page=tab-1">Rank1</a>
<a href="http://example.com/Rank2?page=tab-2">Rank2</a>
<a href="http://example.com/Rank3?page=tab-3">Rank3</a>

因此,当我单击链接时,我需要在新页面中的正确元素中添加“当前”类。 (我在新页面中有代码可以在工作正常的选项卡之间切换)。新页面中的表格:

<ul class="tabs">
    <li id="divtab-1" class="button tab-link" data-tab="tab-1">Rank1</li>
    <li id="divtab-2" class="button tab-link" data-tab="tab-2">Rank2</li>
    <li id="divtab-3" class="button tab-link" data-tab="tab-3">Rank3</li>
</ul>
<div id="tab-1" class="tab-content">Rank1</div>
<div id="tab-2" class="tab-content">Rank2</div>
<div id="tab-3" class="tab-content">Rank3</div>
</div>

新页面中的实际代码 addclass 'current' o 在点击时删除 class 'current'。谢了!

    jQuery( function( $ ){
  $(document).ready(function(){

    $('ul.tabs li').click(function(){
      var tab_id = $(this).attr('data-tab');

      $('ul.tabs li').removeClass('current');
      $('.tab-content').removeClass('current');

      $(this).addClass('current');
      $("#"+tab_id).addClass('current');
    })
  })
  var url = window.location.href;
  var queryString = url.split("?")[1];
  var paramValue = queryString.split("=")[1];
  $("#div"+paramValue).addClass('current');
      $("#"+paramValue).addClass('current');
});

【问题讨论】:

  • 我怀疑你想错了。从一个页面导航到另一个页面时,第一页不会修改第二页上的任何内容。每个页面都是独立运行的。专注于您的第二页。当该页面加载时,您需要检测哪些信息才能确定要执行的操作? 听起来您希望在页面加载时读取 URL,并根据该 URL 修改某些元素的类。
  • 我编辑了这篇文章。我认为你是对的。我想在第 1 页链接 Rank2 中单击(链接到第 2 页),然后在第 2 页中添加“li.button.tab-link”选项卡 2 和“选项卡内容”选项卡 2 中的“当前”以显示信息。
  • 第一个链接与标签之间的关系是什么?如果您点击http://example.com/Rank2/,您需要将current 添加到所有tab-2 中吗?那为什么.tab-link 不是锚?
  • 好吧,实际上我使用的代码关注“data-tab”和#tab_id。它工作正常,但我不知道如何编辑以使用 url 参数或类似的东西。

标签: javascript jquery


【解决方案1】:

如果您不是在纯 JS 中执行所有这些操作,请使用查询参数:

在第一页更改网址,如下所示:

<a href="http://example.com?page=Rank1">Rank1</a> 
<a href="http://example.com?page=Rank2">Rank2</a>
<a href="http://example.com?page=Rank3">Rank3</a>

在第二页访问此 url 参数:

var url = window.location.href;
var queryString = url.split("?")[1];
var paramValue = queryString.split("=")[1]; // would print Rank1 or Rank2 or Rank3 based on url param

一旦您获得页面名称的值,请按照您的编码执行您的 Tab 逻辑

【讨论】:

  • 哦!谢谢!我想我很接近,我根据你的建议编辑了代码。现在,当您单击链接显示内容时,但我也在尝试在 ul.li 中添加“当前”。你能帮忙吗?
  • 好的,Vipul,我为 ul.li 元素添加了一个新的 id。你知道更清洁的东西吗?请检查我的代码。并且谢谢!