问题:
编写常见的CSS代码以便应用于两个nav元素.我在Google和Stackoverflow上搜索都没有成功.在W3C允许的情况下,使用两个导航元素似乎并不常见.
HTML代码:
<!-- Global navigation -->
<nav role="main">
<ul>
<li><a href="index.html" class="active">Startpage</a></li>
<li><a href="cars.html">Cars</a></li>
<li><a href="about.html">About us</a></li>
</ul>
</nav>
<!-- Local navigation -->
<nav role="sub">
<ul>
<li><a href="ferrari.html" class="pressed">Ferrari</a></li>
<li><a href="bmw.html">BMW</a></li>
<li><a href="volo.html">Volvo</a></li>
</ul>
</nav>
CSS代码:
我如何编写CSS代码,以使两个导航元素具有相同的布局,但不同的样式(颜色,字体大小等)？
问题: 我想在一个li元素的子元素中添加一个类.
HTML代码:
<li class="active">
<a href="index.html" title="Homepage">Homepage<i class="icon-home"></i></a>
</li>
jQuery代码:
<script type="text/javascript">
$(document).ready(function()
{
$('li[ class="active" ]').hover(
function(){ $(this).addClass('icon-white') },
function(){ $(this).removeClass('icon-white') }
)
});
</script>
期望的结果:
<li class="active">
<a href="index.html" title="Homepage">Homepage<i class="icon-home icon-white"></i></a>
</li>
将类添加到特定元素的代码:
<script type="text/javascript">
$(document).ready(function()
{
if ($('#main-nav > li').hasClass('active') == true)
{
$("a > i", this).addClass('icon-white');
}
});
</script>
更新(最终解决方案):
<script type="text/javascript">
$(document).ready(function()
{
$('#main-nav li').hover(function()
{
if ($(this).hasClass('active') != true)
{
$('a', this).find('i').toggleClass('icon-white');
}
});
$("#main-nav li.active > a > i").addClass('icon-white');
});
</script> …问题:
我试图使用PHP在数组中的值的帮助下生成自定义HTML表单.
PHP代码($ row ['Key']将包含W,B和R):
$numbers[$row['Key']] = array (
'C' =>
array (
'BO' => $row['BO'],
'BT' => $row['BT']),
'D' =>
array (
'MF' => $row['MF'],
'MT' => $row['MT'])
);
使用PHP生成的数组:
Array
(
[W] => Array
(
[C] => Array
(
[BO] => 36
[BT] => 63
)
[D] => Array
(
[MF] => 54
[MT] => 63
)
)
[B] => Array
(
[C] => Array
(
[BO] => 60
[BT] => 105
)
[D] => …问题：
我正在使用Bootstrap滑块，可以在这里https://seiyria.com/bootstrap-slider/找到。使用示例8时，工具提示不会像在网站上那样显示。
最小工作示例（MWE）：
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Judgement</title>
<!-- Bootstrap Core CSS -->
<link href="https://seiyria.com/bootstrap-slider/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap Slider -->
<link href="https://seiyria.com/bootstrap-slider/css/bootstrap-slider.css" rel="stylesheet">
</head>
<body>
<input id="judgement" data-slider-id="judgementslider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://seiyria.com/bootstrap-slider/js/bootstrap-slider.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$("#judgement").slider({
tooltip: 'always'
});
});
</script>
</body>
</html>
示例片段：
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, …我有一个表格，其中包含一个带有图标的列。我希望默认情况下隐藏图标，并且只在悬停时出现。
HTML代码：
<table class="table table-hover">
<tr>
<th>From</th>
<th>To</th>
<th>Connecting Airport</th>
<th>Comment</th>
<th>Report</th>
</tr>
<tr>
<td>JFK</td>
<td>CPH</td>
<td>ARN</td>
<td>N/A</td>
<td><i class="fa fa-exclamation-triangle" title="Report outdated information" style="color:#da5450;"></i></td>
</tr>
<tr>
<td>SFO</td>
<td>EWR</td>
<td>ORD</td>
<td>N/A</td>
<td><i class="fa fa-exclamation-triangle" title="Report outdated information" style="color:#da5450;"></i></td>
</tr>
</table>
最小工作示例：
html ×4
jquery ×3
css ×2
javascript ×2
addclass ×1
arrays ×1
forms ×1
hover ×1
html-lists ×1
nav ×1
php ×1
slider ×1
stylesheet ×1