如何在另一个html页面中使用onclick事件调用javascript函数
我正在创建一个个人“投资组合网站”，其中有2个html页面 在第一个页面是portfolio.html，我使用JavaScript过滤类别，默认类别活动是Show All 嗯。。在index.html的第二页上，我有一个按钮，可以重定向到portfolio.html页面 我的问题是：“如何在index.html中创建一个按钮，使其直接重定向到portfolio.html页面&默认的分类活动是分类编程？” 请反馈和帮助，谢谢 这是index.html中的代码按钮如何在另一个html页面中使用onclick事件调用javascript函数,javascript,html,Javascript,Html,我正在创建一个个人“投资组合网站”，其中有2个html页面 在第一个页面是portfolio.html，我使用JavaScript过滤类别，默认类别活动是Show All 嗯。。在index.html的第二页上，我有一个按钮，可以重定向到portfolio.html页面 我的问题是：“如何在index.html中创建一个按钮，使其直接重定向到portfolio.html页面&默认的分类活动是分类编程？” 请反馈和帮助，谢谢 这是index.html中的代码按钮 <a href="
<a href="menu/portfolio.html#myprojects"><button onclick="filterSelection('programming')">Read More</button></a>
<!-- 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 -->
// 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";
});
}
//JavaScript过滤器类别
过滤器选择（“全部”）
函数过滤器选择（c）{
变量x，i；
x=document.getElementsByClassName（“filterDiv”）；
如果（c==“全部”）c=“”；
对于（i=0；i-1）w3AddClass（x[i]，“show”）；
}
}
函数w3AddClass（元素、名称）{
变量i，arr1，arr2；
arr1=element.className.split（“”）；
arr2=name.split（“”）；
对于（i=0；i-1）{
arr1.拼接（arr1.indexOf（arr2[i]），1）；
}
}
element.className=arr1.join（“”）；
}
//将活动类添加到当前按钮（高亮显示）
var btnContainer=document.getElementById（“myBtnContainer”）；
var button=btnContainer.getElementsByCassName（“btn”）；
对于（变量i=0；i 您需要在目录中创建两个单独的文件（index.html、posts.html）
<a href="menu/portfolio.html?filter=programming#myprojects">Read More</a>
阅读更多关于我建议您使用
.php.htmlphpfilterSelection（）index.phpreceiving page.php<?php
//default value
$category = 'all';
if(isset($_GET['category']) && !empty($_GET['category'])){
$category = $_GET['category'];
}
?>
//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');
//创建一个包含所有类别的数组，称为all_categories。
//用户可能会直接键入疯狂的查询字符串，以便我们进行验证
让fromURL=''；
过滤器选择（所有类别。包括（fromURL）？fromURL:“全部”）；
<?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>
<!DOCTYPE html>
<html>
<head>
<title>Home page</title>
</head>
<body>
<a href="menu/portfolio.php?category=programming">Visit portfolio</a>
</body>
</html>
主页
<?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>
文件夹
//创建一个包含所有类别的数组，称为all_categories。
//用户可能会直接键入疯狂的查询字符串，以便我们进行验证
让所有类别=[‘编程’、‘游戏’、‘设计’、‘3d’、‘全部’]；
让fromURL=''；
let accepted=所有类别。包括（fromURL）？fromURL:'所有'；
//在接受的变量中，我们检查查询字符串是否属于我们定义的值。如果不是，我们将所有分配给accepted，但如果它属于，则我们接受它。
过滤器选择（已接受）；
函数过滤器选择（类别）{
document.getElementById（'displated'）。innerText=category；
}
每当您从浏览器地址栏更改category的值时，显示id
的html div的innerText就会更改为新的category，这可能是您希望程序执行的操作。如果类别在类别数组中未被识别，则all
设置为accepted
变量，该变量可以使用默认设置的filterSelection（'all'）
直接调用？我创建了两个独立的文件？我不明白，当我单击“阅读更多”时，它会自动重定向到编程类别吗？你能编辑我的所有代码并将其放在这里的答案中吗。。我不太明白，因为我还是个初学者hehe@IrfanHafizh单击“阅读更多”时，它将重定向到公文包页面，如果在页面上设置锚定标记，则会重定向到myprojects
部分。通过向查询中添加filter=programming
，您在导航中包含了额外的信息。您的javascript inside portfolio.html可以利用这些信息来执行更多的代码，比如设置过滤器、从页面添加或删除元素，或者使用javascript可以执行的任何操作。我不会为您编写整个代码，因为这不是堆栈溢出的工作方式。我们为他人编写代码得到报酬。receiving-page.php是指我的portfolio.html吗？是的，portfolio.html
现在应该是portfolio.php
（您编写的所有内容都将保持不变）但是您需要在开发期间在您的计算机中安装一个本地服务器，如XAMP或WAMP中的服务器。PHP语法检查：解析错误：语法错误，意外的“category”（T_STRING），第5行代码中应为“]$category=$\u GET['category'”；有输入错误，请更改表格！空（$\u GET['category]）
到！空（$\u GET['category']）
。我将正确编辑答案。apostr