当前位置： 文江博客 话题详情

如何在 HTML 中制作文本按钮

发布于 2025-01-18 16:36:21 字数 1437 浏览 4 评论 0 原文

原文

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（7）

倒数 2025-01-25 16:36:21

你是这样的？

button {
    background-color:white;
    border:0px;
}

button:hover {
    text-decoration:underline;
    }
<button> Button 1 as a text
</button>

<button> Button 2 as a text
</button>

$(document).ready(function() {
  $("button#wildlife").click(function() {
    $(".wildlife> img").toggle();
    $(".landscape> img").hide();
    $(".ocean> img").hide();
  });

  $("button#landscape").click(function() {
    $(".landscape> img").toggle();
    $(".ocean> img").hide();
    $(".wildlife> img").hide();
  });

  $("button#ocean").click(function() {
    $(".ocean> img").toggle();
    $(".wildlife> img").hide();
    $(".landscape> img").hide();
  });

});
button {
  background-color: white;
  border: 0px;
}

button:hover {
  text-decoration: underline;
  cursor: pointer;
}

.landscape>img {
  display: none;
}

.ocean>img {
  display: none;
}
<html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<body>

  <button id="wildlife">Wildlife</button><br>
  <button id="landscape">Landscape</button><br>
  <button id="ocean">Ocean</button>

  <div class="wildlife">
    <img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
    <img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
    <img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
    <img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
    <img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
    <img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
  </div>

  <div class="landscape">
    <img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
    <img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
    <img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
    <img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
    <img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
    <img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
  </div>


  <div class="ocean">
    <img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
    <img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
    <img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
    <img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
    <img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
    <img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
  </div>
</body>

</html>

You mean like this??

button {
    background-color:white;
    border:0px;
}

button:hover {
    text-decoration:underline;
    }
<button> Button 1 as a text
</button>

<button> Button 2 as a text
</button>

$(document).ready(function() {
  $("button#wildlife").click(function() {
    $(".wildlife> img").toggle();
    $(".landscape> img").hide();
    $(".ocean> img").hide();
  });

  $("button#landscape").click(function() {
    $(".landscape> img").toggle();
    $(".ocean> img").hide();
    $(".wildlife> img").hide();
  });

  $("button#ocean").click(function() {
    $(".ocean> img").toggle();
    $(".wildlife> img").hide();
    $(".landscape> img").hide();
  });

});
button {
  background-color: white;
  border: 0px;
}

button:hover {
  text-decoration: underline;
  cursor: pointer;
}

.landscape>img {
  display: none;
}

.ocean>img {
  display: none;
}
<html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<body>

  <button id="wildlife">Wildlife</button><br>
  <button id="landscape">Landscape</button><br>
  <button id="ocean">Ocean</button>

  <div class="wildlife">
    <img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
    <img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
    <img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
    <img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
    <img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
    <img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
  </div>

  <div class="landscape">
    <img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
    <img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
    <img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
    <img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
    <img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
    <img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
  </div>


  <div class="ocean">
    <img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
    <img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
    <img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
    <img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
    <img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
    <img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
  </div>
</body>

</html>

回复 原文
゛时过境迁 2025-01-25 16:36:21

我不建议在画廊中使用桌子。您也许可以将每个画廊放在不同的 html 页面中，并使用标签来访问它们。喜欢：

<a href="wildlife.html">Wildelife</a>

但如果您希望它们在同一页面上动态显示或滑动，您可能需要一些 javascript 或 jquery。

I don't recommend the use of a table for a gallery. You can maybe put each gallery in a different html page and use the tag to access them. like:

<a href="wildlife.html">Wildelife</a>

But if you want them to appear or slide dynamically on the same page you may need some javascript or jquery.

回复 原文
初与友歌 2025-01-25 16:36:21

我真的不明白你的问题。

但是，如果您想制作一个按钮，请使用＆lt; input Type ='text'＆gt;按钮＆lt;/input＆gt; 或按钮元素。

或者，如果要单击映像，请使用＆lt; a href =“ image_url”＆gt;＆lt; img href =“ image_url＆gt;＆lt;/＆gt;/a＆gt;“ >

I don't really understand your problem.

However, if you are trying to make a button then use the <input type='text'> button </input> or the button element.

Or if you want an image to be clickable then use <a href="image_URL"><img href="image_URL></a>"

回复 原文
橘虞初梦 2025-01-25 16:36:21

如果画廊在其单独的页面上：使用＆lt; a href =“ site.com/gallary/wildlife”＆gt; wildlife＆lt;/a＆gt;

如果画廊将作为完整屏幕弹出：使用：使用： ＆lt; button ID =“野生动物”＆gt; wildlife＆lt;/button＆gt;

您还可以使用＆lt;详细信息＆gt; summary＆gt; summary＆gt; 元素以获取相同的功能，而无需更多的功能在JavaScript

上编辑1：

您可以像

If galleries are on their separate page: use <a href="SITE.COM/gallary/wildlife">Wildlife</a>

If galleries will open as a full screen pop-up: use <button id="wildlife">Wildlife</button>

You can also use <details><summary> element to get the same functionality without depending more on JavaScript

EDIT 1:

you can us a js library like PhotoSwipe,
it could fit perfectly in your use case

回复 原文
此生挚爱伱 2025-01-25 16:36:21

使用输入类型=“提交”值=“添加”

值表示名称
该按钮名称为add

Use input type="submit" value="add"

Value mean Name
This button name is add

回复 原文
始终不够爱げ你 2025-01-25 16:36:21

您应该使用＆lt; a href =“/”＆gt;＆lt; img src =“” alt =“”/＆gt;＆lt;/a＆gt;

you should use <a href="/"><img src="" alt="" /></a>

回复 原文
梦断已成空 2025-01-25 16:36:21

嘿，你的问题有点不清楚，但是如果你想要一个点击打开野生动物画廊的按钮，你可以有这样的东西 或者只是创建一个名为wildlife.html 的页面并将按钮直接指向它

我希望这有帮助：D
抱歉，如果这不是一个方向。

Hey your question is a bit unclear, but if you want a button that you click that opens up a wildlife gallery you can have something like this <button> <a href = www.wildlife-photos.com/gallery></a> Wildlife </button> or just make a page called wildlife.html and make the button direct to it <button> <a href = wildlife.html></a> Wildlife </button>

I hope this helps :D
Sorry if this isn't much of a direction.

回复 原文
~没有更多了~

关于作者

溺孤伤于心

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

櫻之舞

文章 0 评论 0

弥枳

文章 0 评论 0

m2429

文章 0 评论 0

寻找一个思念的角度

文章 0 评论 0

野却迷人

文章 0 评论 0

我怀念的。

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文