如何解决放在网站上后,带有标签的滑块出现问题
我有带标签的滑块。这里一切正常。我们在 Magento 2.4 上使用网站(模板使用 Bootstrap 4.x)。 当我把这段代码放在主页上时,这个滑块不起作用,我们的其他样式模板被破坏了。谁能告诉我怎么做才能使这段代码正常工作?
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Tabs Example</title>
<meta name = "viewport" content = "width = device-width,initial-scale = 1">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body class = "container">
<div class = "row">
<div id = "inbox" class = "col s12"><img src="https://iv.pl/images/20f860c0ea08f16302bca9629bf6fb00.png"></div>
<div id = "unread" class = "col s12"><img src="https://iv.pl/images/20f860c0ea08f16302bca9629bf6fb00.png"></div>
<div id = "outbox" class = "col s12"><img src="https://iv.pl/images/20f860c0ea08f16302bca9629bf6fb00.png"></div>
<div id = "sent" class = "col s12"><img src="https://iv.pl/images/20f860c0ea08f16302bca9629bf6fb00.png"></div>
<div class = "col s12">
<ul class = "tabs">
<li class = "tab col s3"><a href = "#inbox">Inbox</a></li>
<li class = "tab col s3"><a class = "active" href = "#unread">
Unread</a></li>
<li class = "tab col s3"><a href = "#outbox">
Outbox (Disabled)</a></li>
<li class = "tab col s3"><a href = "#sent">Sent</a></li>
</ul>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
$('.tabs').tabs({ swipeable: true });
});
</script>
</body>
</html>
与此链接有关:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
当我放入标题时,此滑块可以工作,但破坏了模板中的所有样式。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。