如何在另一個頁面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>