Php Laravel：单击html按钮时显示具有相同URL的列表
我面临一个问题，请看下面的截图 在屏幕截图中，您可以看到其图像上载页面。默认情况下，应显示添加图像按钮和显示列表的表格。我想要实现的概念是，当我单击“添加图像”按钮时，表列表应该是隐藏的，并且必须显示图像上载部分。这一切都应该发生在同一个URL中 代码如下： 路线：Php Laravel：单击html按钮时显示具有相同URL的列表,php,laravel,routes,show-hide,Php,Laravel,Routes,Show Hide,我面临一个问题，请看下面的截图 在屏幕截图中，您可以看到其图像上载页面。默认情况下，应显示添加图像按钮和显示列表的表格。我想要实现的概念是，当我单击“添加图像”按钮时，表列表应该是隐藏的，并且必须显示图像上载部分。这一切都应该发生在同一个URL中 代码如下： 路线： Route::post('/imageupload', 'Admin\ImageController@imageUploadPost')->name('image.upload.post'); <div class=
Route::post('/imageupload', 'Admin\ImageController@imageUploadPost')->name('image.upload.post');
<div class="panel panel-container">
<button type="button" class="btn btn-primary">Add Image</button>
</div>
<div class="panel panel-container">
<table class="table table-striped" id="slideshow">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="panel panel-container hide-img-upload">
<form action="{{ route('image.upload.post') }}" method="POST" enctype="multipart/form-data">
@csrf
<div class="row">
<div class="col-md-6">
<input type="file" name="image" class="form-control">
</div>
<div class="col-md-6">
<button type="submit" class="btn btn-success">Upload</button>
</div>
</div>
</form>
</div>
</div>
Route::post('/imageupload', 'Admin\ImageController@imageUploadPost')->name('image.upload.post');
<div class="panel panel-container">
<button type="button" class="btn btn-primary">Add Image</button>
</div>
<div class="panel panel-container">
<table class="table table-striped" id="slideshow">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="panel panel-container hide-img-upload">
<form action="{{ route('image.upload.post') }}" method="POST" enctype="multipart/form-data">
@csrf
<div class="row">
<div class="col-md-6">
<input type="file" name="image" class="form-control">
</div>
<div class="col-md-6">
<button type="submit" class="btn btn-success">Upload</button>
</div>
</div>
</form>
</div>
</div>
任何帮助都将不胜感激 这是关于html和javascript人员的更多信息。 您可以将此用作提示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<button onclick="alter()">Alter</button>
<div id="first">First</div>
<div id="sec">Second</div>
<script>
document.getElementById('sec').style.visibility = 'hidden';
function alter(){
if(document.getElementById('sec').style.visibility == 'hidden'){
document.getElementById('sec').style.visibility = 'visible';
document.getElementById('first').style.visibility = 'hidden';
}else{
document.getElementById('sec').style.visibility = 'hidden';
document.getElementById('first').style.visibility = 'visible';
}
}
</script>
</body>
</html>
答复
改变
弗斯特
第二
document.getElementById（'sec'）.style.visibility='hidden'；
函数alter（）{
if（document.getElementById（'sec'）.style.visibility=='hidden'）{
document.getElementById（'sec'）.style.visibility='visible'；
document.getElementById（'first'）.style.visibility='hidden'；
}否则{
document.getElementById（'sec'）.style.visibility='hidden'；
document.getElementById（'first'）.style.visibility='visible'；
}
}
<input type="file" name="image" id="file_input" class="form-control">
<div class="panel panel-container" id="list_scope">
<script>
document.getElementById('file_input').onclick = function() {
document.getElementById('list_scope').style.display = "none";
};
</script>
document.getElementById（'file_input'）。onclick=function（）{
document.getElementById（'list_scope'）.style.display=“无”；
};
<div class="panel panel-container">
<button type="button" class="btn btn-primary"data-toggle="modal"data-target="#myModal">Add Image</button>
</div>
<div class="panel panel-container">
<table class="table table-striped" id="slideshow">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="modal" id="myModal" role="dialog"
aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Upload Image </h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="container"></div>
<div class="panel panel-container hide-img-upload">
<form action="{{ route('image.upload.post') }}" method="POST" enctype="multipart/form-data">
@csrf
<div class="row">
<div class="col-md-6">
<input type="file" name="image" class="form-control">
</div>
<div class="col-md-6">
<button type="submit" class="btn btn-success">Upload</button>
</div>
</div>
</form>
</div>
</div>
</form>
</div>
</div>
添加图像
#
弗斯特
最后
手柄
1.
做记号
奥托
@mdo
2.
雅各布
桑顿
@肥
3.
拉里
鸟
@推特
上传图像
×
@csrf
上传
或者使用javascript hidden show来实现这个使用模式。它将帮助您这更像是一个
javascript/css.d-none$（“#yourId”）.toggleClass（'d-none'）