只是一个简单的问题.我在使用onclick javascript的div中遇到问题.当我点击内部div时,它应该只触发它的onclick javascript,但外部div的javascript也被触发了.如何在不激发外部div的javascript的情况下点击内部div？
<html>
<body>
<div onclick="alert('outer');" style="width:300px;height:300px;background-color:green;padding:5px;">outer div
<div onclick="alert('inner');" style="width:200px;height:200px;background-color:white;" />inner div</div>
</div>
</div>
</body>
</html>
基本上,我喜欢<input type="submit">风格的方式,添加一点CSS时可点击按钮.但是,常规按钮没有这样的样式,没有一些主要的CSS或JS它们没有这样的可点击性,你必须使用图像.
我通过使用表单操作将提交按钮设置为链接,但这需要我为每个按钮创建一个新表单.我怎样才能找到幸福的媒介？使用多个表单导致我的样式出现问题我似乎无法解决,除非我找到另一种方法来制作HTML中的链接按钮,这些按钮具有使其具有按下状态的默认样式(我并不是说浏览器默认设置).
有任何想法吗？
我想在引导选项卡中添加一个关闭图标,然后我可以通过单击图标关闭选项卡.
我尝试下面,但"X"显示不与标题标题在同一行.
.close {
font-size: 20px;
font-weight: bold;
line-height: 18px;
color: #000000;
text-shadow: 0 1px 0 #ffffff;
opacity: 0.2;
filter: alpha(opacity=20);
text-decoration: none;
display:inline;
}
.close:hover {
display:inline;
color: #000000;
text-decoration: none;
opacity: 0.4;
filter: alpha(opacity=40);
cursor: pointer;
}
<a id="user-list-tab-li" style="display:inline;" href="#user-list-tab-pane">The tab</a>
<span class="close">×</span>
我在react-router-dom中有这个路径:
<BrowserRouter>
<div>
<Route exact path='/(index.html)?' component={Home}/> {/* app = home */}
<Route path='/register' component={Registration}/>
</div>
</BrowserRouter>
一切都工作正常,现在我的组件中的任何地方我想通过onClick更改路径,这样的代码:
<button onClick={() => history.push('/the/path') }> change path </button>
我怎样才能做到这一点？
我正在学习前端开发,我正在尝试使用bootstrap编写我的第一个站点.我猜,我陷入了一个非常简单的事情.如何将文本置于按钮中心？
这是按钮,默认使用"a"标签.
<a class="btn btn-default btn-work" href="#">Check my work</a>
并给它一个宽度和一个高度,文字仍然卡在顶部..
.btn-work {
width: 250px;
height: 50px;
margin: 0 auto;
vertical-align: middle;
}
我也试图将按钮对准容器的中心,我也无法弄明白.
谢谢 !
How can I make a Material UI react Button component act as a Link component from react-router-dom without losing it's original style? Like changing the route on click.
import Button from '@material-ui/core/Button';
<Button variant="contained" color="primary">
About Page
</Button>
To something like this, but maintaining the original Button style:
import Button from '@material-ui/core/Button';
import { Link } from 'react-router-dom';
<Button variant="contained" color="primary">
<Link to="/about">
About Page
</Link>
</Button>
javascript reactjs react-router material-ui react-router-dom
我试图让两个超链接按钮并排.我看到了这个问题,但无法使答案奏效.以下是我尝试将按钮并排的两次尝试.第一次尝试有效,但超链接到错误的位置.第二个超链接正确但不是并排.基于这个问题的第三个没有链接任何地方,但我认为这与使用链接而不是Javascript:submitRequests().
<!DOCTYPE html>
<html>
<body>
<head>
<style>
.container {
overflow: hidden;
}
button {
float: left;
}
button:first-child {
margin-right: 5px;
}
</style>
</head>
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
</form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
Attempt 1
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
</form>
Attempt 2
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
</form><form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
Attempt 3
<div class="container">
<button …我有一个HTML按钮，我希望它通过按一下来下载pdf文件。谢谢
<div class="columns download">
<p>
<a href="images/Portfolio.pdf" class="button"><i class="fa fa-download"></i>Download CV</a>
</p>
</div>
笔记：
答案会是这样的..是的..有规则和方法..这取决于收养机构的算法等。你可以按照这些（链接）等和你的简短描述。我不是在寻找任何算法或更多..
例如，如果一个a标签嵌套一个a 标签。chrome 浏览器重组 html 。类似的button标签。两者都是无效的 html 结构
我知道a和button标签都是交互元素。交互元素（a、按钮、输入等）与用户的活动相关。
从评论：
这个问题太宽泛了。
我认为每个浏览器都应该从某个地方以相同的方式工作......这意味着应该遵循一些基本规则或方法。如果有人发现类似的东西，请提及。
为什么我要找这个？
当我为客户工作时。我发现许多无效的 html 结构。多种类型的html结构。有时我需要重新设计无效的 html 结构。我想我需要了解浏览器重构的概念以进行进一步的 Web 开发。
let aTag = document.querySelectorAll('a')
let buttonTag = document.querySelectorAll('button')
console.log('===a tag===')
aTag.forEach(function(item){
console.log(item)
})
console.log('===button tag===')
buttonTag.forEach(function(item){
console.log(item)
}) .card{
display: flex;
flex-direction: column;
padding: 10px;
border: 1px solid slateblue;
width: 200px;
text-align: center;
}<a href="" class="parent a-tag">
<div class="card">
<h4>Title</h4>
<p>Paragraph</p>
<button>Add to …请帮助,我在验证我的html5模板时通过http://validator.w3.org/收到错误.我收到消息"元素不能作为按钮元素的后代出现".我无法理解这一点.谁能帮我解决这个问题？
这是我的代码---
<div class="post-response btn-group btn-group-lg">
<a href="#"><button type="button" class="btn btn-default"><i class="fa fa-comment"> 5 Comments</i></button></a>
<a href="#"><button type="button" class="btn btn-default"><i class="fa fa-heart"> 5 Likes</i></button></a>
</div>