如何在另一个页面html中使用onclick事件调用javascript函数

Question

我正在创建一个有 2 个 html 页面的个人“投资组合网站”。

在第一页上有组合.html，我使用 JavaScript 来过滤类别，默认类别活动是全部显示，

嗯，.. 在 index.html 的第二页上，我有一个重定向到portfolio.html 页面的按钮。

我的问题：“如何在 index.html 中创建一个按钮，以便它直接重定向到portfolio.html 页面并自动将默认类别活动转到类别编程？”

请反馈和帮助，谢谢。

这是 index.html 中的代码按钮

<a href="menu/portfolio.html#myprojects"><button onclick="filterSelection('programming')">Read More</button></a>

这是portfolio.html中的代码

<!-- FILTER BUTTON -->
<div id="myBtnContainer">
    <a href="#myprojects"><button class="btn active" onclick="filterSelection('all')">Show all</button></a>
    <a href="#myprojects"><button class="btn" onclick="filterSelection('programming')">Programming</button></a>
    <a href="#myprojects"><button class="btn" onclick="filterSelection('game')">Game Development</button></a>
    <a href="#myprojects"><button class="btn" onclick="filterSelection('design')">Graphic Design</button></a>
    <a href="#myprojects"><button class="btn" onclick="filterSelection('3d')">3D Creation</button></a>
</div>

<!-- Card Portfolio -->
  <div class="container">
      <!-- Card Portfolio -->
    <div class="filterDiv programming">
        <a href="../index.html">
      <div id="card">
          <div class="card-banner">
              <p class="category-tag banner">Programming</p>
              <img class="banner-img" src='https://images.unsplash.com/photo-1515879218367-8466d910aaa4?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
          </div>
          <div class="card-body">
              <p class="blog-hashtag"><i class="fas fa-calendar-alt"></i> Kamis, 19 November 2020</p>
              <h2 class="blog-title">What is the future of front end development?</h2>
              <p class="blog-description">My thoughts on the future of front end web development</p>
          </div>
      </div>
        </a>
    </div>
    <div class="filterDiv 3d">
        <a href="../index.html">
      <div id="card">
          <div class="card-banner">
              <p class="category-tag banner">3D Creation</p>
              <img class="banner-img" src='https://images.unsplash.com/photo-1413708617479-50918bc877eb?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
          </div>
          <div class="card-body">
              <p class="blog-hashtag"><i class="fas fa-calendar-alt"></i> Kamis, 19 November 2020</p></p>
              <h2 class="blog-title">Photography gear you need this year</h2>
              <p class="blog-description">Looking to upgrade your gear? Here is the list of the best photography tools for this year</p>
          </div>
      </div>
        </a>
    </div>
    <div class="filterDiv design">
        <a href="../index.html">
      <div id="card">
          <div class="card-banner">
              <p class="category-tag banner">Graphic Design</p>
              <img class="banner-img" src='https://images.unsplash.com/photo-1592496001020-d31bd830651f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
          </div>
          <div class="card-body">
              <p class="blog-hashtag"><i class="fas fa-calendar-alt"></i> Kamis, 19 November 2020</p></p>
              <h2 class="blog-title">Mediation and Mental Wellness Best Practices</h2>
              <p class="blog-description">Mediation has transformed my life. These are the best practices to get into the habit</p>
          </div>
      </div>
        </a>
    </div>
    <div class="filterDiv programming">
        <a href="../index.html">
      <div id="card">
          <div class="card-banner">
              <p class="category-tag banner">Programming</p>
              <img class="banner-img" src='https://images.unsplash.com/photo-1515879218367-8466d910aaa4?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
          </div>
          <div class="card-body">
              <p class="blog-hashtag"><i class="fas fa-calendar-alt"></i> Kamis, 19 November 2020</p>
              <h2 class="blog-title">What is the future of front end development?</h2>
              <p class="blog-description">My thoughts on the future of front end web development</p>
          </div>
      </div>
        </a>
    </div>
    <div class="filterDiv 3d">
        <a href="../index.html">
      <div id="card">
          <div class="card-banner">
              <p class="category-tag banner">3D Creation</p>
              <img class="banner-img" src='https://images.unsplash.com/photo-1413708617479-50918bc877eb?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
          </div>
          <div class="card-body">
              <p class="blog-hashtag"><i class="fas fa-calendar-alt"></i> Kamis, 19 November 2020</p></p>
              <h2 class="blog-title">Photography gear you need this year</h2>
              <p class="blog-description">Looking to upgrade your gear? Here is the list of the best photography tools for this year</p>
          </div>
      </div>
        </a>
    </div>
    <div class="filterDiv design">
        <a href="../index.html">
      <div id="card">
          <div class="card-banner">
              <p class="category-tag banner">Graphic Design</p>
              <img class="banner-img" src='https://images.unsplash.com/photo-1592496001020-d31bd830651f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''>
          </div>
          <div class="card-body">
              <p class="blog-hashtag"><i class="fas fa-calendar-alt"></i> Kamis, 19 November 2020</p></p>
              <h2 class="blog-title">Mediation and Mental Wellness Best Practices</h2>
              <p class="blog-description">Mediation has transformed my life. These are the best practices to get into the habit</p>
          </div>
      </div>
        </a>
    </div>
    <!-- End Card -->
  </div>
<!-- End Card -->

这是script.js中的代码

// JavaScript Filter Category
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}

function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
}
}

function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
    arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
}
element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var button = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < button.length; i++) {
button[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
});
}

这是一个图片的例子

索引.html

当我单击 index.html 默认类别活动中的阅读更多按钮时，不会更改为编程

当我点击 index.html 中的阅读更多按钮时，这就是我想要的

Answer 1

您可以在 url 字符串中使用查询字符串参数，如下所示：

<a href="menu/portfolio.html?filter=programming#myprojects">Read More</a>

并在您的投资组合.html 中检查查询字符串参数以应用所需的过滤或您想要根据过滤器参数中提供的字符串进行的任何自定义操作

var urlParams = new URLSearchParams(window.location.search);
urlParams.get('filter') // returns "programming"

阅读有关URLSearchParams 的更多信息

Answer 2

在尝试之前，请先在另一个文件夹中备份您的工作。 我的代码仅包含仅用于检查的相关信息。

索引.php

此页面仅包含重定向按钮。 完全按照原样复制代码。

<!DOCTYPE html>
<html>
<head>
<title>Home page</title>
</head>
<body>
<a href="menu/portfolio.php?category=programming">Visit portfolio</a>
</body>
</html>

投资组合.php

<?php
 //default value
 $category = 'all';
 if(isset($_GET['category']) && !empty($_GET['category'])){
 $category = $_GET['category'];
 }
 ?>
 <!DOCTYPE html>
 <html>
 <head>
 <title>Portfolio</title>
 </head>
 <body>
 <div id="displayed"></div>
 <script>
//create an array of all the categories called all_categories.
//A user might literally type a crazy query string so we verify
let all_categories = ['programming', 'game', 'design', '3d', 'all'];
let fromURL = '<?php echo $category;?>';
let accepted = all_categories.includes(fromURL) ? fromURL : 'all';
// In the accepted variable, we check if the query string belong to our defined values. If not, we assign all to accepted but if it belongs, then we accept it.
filterSelection(accepted);
function filterSelection(category) {
    document.getElementById('displayed').innerText = category;
}
</script>
</body>
</html>

每当您从浏览器地址栏中更改 category 的值时， displayed id 的 html div 的 innerText 将更改为新类别，这可能是您希望程序执行的操作。 如果在类别数组中无法识别类别，则all设置为accepted变量，可以使用filterSelection('all')作为默认设置从字面上调用该变量

Answer 3

我建议你使用.php而不是.html 。 使用php ，您可以接收一个查询字符串并将其传递给您的 js filterSelection() 。 在index.php ，按钮应该像<a href="receiving-page.php?category=programming"><button class="btn active">Button name</button></a>现在在receiving-page.php页面，在页面顶部输入以下内容..

<?php
  //default value
  $category = 'all';
  if(isset($_GET['category']) && !empty($_GET['category'])){
  $category = $_GET['category'];
  }
  ?>

然后在你的js中输入以下内容..

//create an array of all the categories called all_categories.
//A user might literally type a crazy query string so we verify
let fromURL = '<?php echo $category;?>';
filterSelection(all_categories.includes(fromURL) ? fromURL : 'all');

Answer 4

你需要在你的目录（index.html的，posts.html）创建两个单独的文件<a href="./post.html">Go to the post</a> <a href="./index.html">Go to the index</a>