我正在学习使用Bootstrap并使用组件,特别是导航栏.我的链接/列表项没有显示,直接从Bootstrap复制.希望有人可以向我解释我缺少的东西.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>NavBar</title>
<!-- bootstrap css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"> …当前grecaptcha.execute正在页面加载时执行，如下面的第一个 JS 示例所示。如果触发 reCAPTCHA 质询，则会在页面加载时发生这种情况。理想情况下，当单击表单提交按钮时会发生这种情况。因此，我通过将其移动到提交事件（第二个 JS 示例）并将 axios 函数放入承诺中来进行尝试。它在 grecaptcha.execute 执行完成之前提交。
我在这里不明白的是什么？我第一次接触 Promise，所以我不了解 Promise 是如何工作的吗？这不是这个问题的最佳解决方案吗？完全是别的东西吗？
HTML
<head>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" defer></script>
</head>
JS
const form = document.querySelector('#subscribe');
let recaptchaToken;
const recaptchaExecute = (token) => {
recaptchaToken = token;
};
const onloadCallback = () => {
grecaptcha.render('recaptcha', {
'sitekey': 'abcexamplesitekey',
'callback': recaptchaExecute,
'size': 'invisible',
});
grecaptcha.execute();
};
form.addEventListener('submit', (e) => {
e.preventDefault();
const formResponse = document.querySelector('.js-form__error-message');
axios({
method: 'POST',
url: '/actions/newsletter/verifyRecaptcha',
data: qs.stringify({
recaptcha: recaptchaToken,
[window.csrfTokenName]: window.csrfTokenValue,
}),
config: { …第一次接触 JSON，所以请像我 5 岁一样解释一下，不要使用行话。我收到了一个像这样的 JSON 文件，需要在 HTML 列表中显示这些项目。很多示例都将 JSON 对象分配给变量 - 这没有分配给变量，因此我不确定如何引用它。如何访问并显示产品列表中的所有内容。在我的 html 中，我链接到了 script.js 文件以及这个 json 文件。
超文本标记语言
<h1>My Cart</h1>
<div id="cart">
<h2>Cart Items</h2>
<ul id="cartItemsList">
</ul>
</div>
JSON
"basket": {
"productList": [{
"product": {
"id": "111",
"name": "Dog",
"shortDescription": "<p>Mans best friend</p>",
},
"category": "Canine",
"availability": "In Stock",
"variationType": {
"name": "Breed",
"value": "Collie"
}
},
"quantity": 1,
"price": "$53.00"
}, {
"product": {
"id": "112",
"name": "Dog",
"shortDescription": "<p>Not so best friend</p>",
"category": "feline",
"availability": "Low In …如何通过使用 JavaScript 触发按钮上的事件来在元素上平滑地左右滚动？（没有 jQuery）所以我想单击“下一个”和“后退”按钮并向左或向右滚动，其中my-container__content内容非常长。
尝试以下似乎不起作用
超文本标记语言
<div class="my-container">
<div class="my-container__content" style="overflow-x: scroll;" data-scroll-container>
<div class="my-container__item" width="1000000000px">
</div>
</div>
<div>
<button data-back data-scroll-trigger>Back</button>
<button data-next data-scroll-trigger>Next</button>
JS
/**
* Selectors
*/
const selectors = {
scrollContainer: '[data-scroll-container]',
scrollTrigger: '[data-scroll-trigger]',
scrollNext: 'data-next',
scrollBack: 'data-back',
};
/**
* Main
*/
const scrollTrigger = [...document.querySelectorAll(selectors.scrollTrigger)];
const scrollContainer = document.querySelector(selectors.scrollContainer);
const handleScroll = ({ target }) => {
if (target.hasAttribute(selectors.scrollBack)) {
scrollContainer.scrollTo({
right: 100,
behavior: 'smooth',
});
} else {
scrollContainer.scrollTo({
right: 100, …当用户从元素顶部滚动超过 100 像素时，我想向元素添加一个类，但我似乎在页面加载后立即触发此操作。这是我目前拥有的代码
const content = document.getElementById("content");
document.addEventListener("scroll", () => {
content.classList.add(
'curtain-in',
content.scrollTop > 100
);
});
还有你的回答，你能解释一下我哪里出错了。先感谢您
我有一个链接列表。当我悬停/专注于其中之一时。我想更改未悬停的链接的样式。
HTML
<nav>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
CSS
li {
list-style: none;
display: inline-block;
}
a {
color: black;
text-decoration: none;
padding: 15px;
opacity: 1;
}
a:hover {
color: black;
}
a:hover li a {
opacity: 0.5
}
这通常可以更改不同元素的样式，但此逻辑似乎不适用于链接。
先感谢您
javascript ×4
css ×2
ajax ×1
axios ×1
bootstrap-4 ×1
grecaptcha ×1
hover ×1
html ×1
json ×1
navbar ×1
promise ×1
scroll ×1
scrolltop ×1