要在微信浏览器中显示一个div(比如div1),而在非微信浏览器中显示另一个div(比如div2),你可以使用JavaScript结合CSS的display属性来实现这个效果。
html代码:
<div id="div1" class="browser-specific">这是微信浏览器中的内容</div>
<div id="div2" class="browser-specific" style="display: none;">这是非微信浏览器中的内容</div>
<script> // 这里的JavaScript代码将检查是否是微信浏览器,并据此显示或隐藏div </script>
js代码:
window.onload = function() {
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
function isWeixinBrowser() {
var ua = navigator.userAgent.toLowerCase();
if (/micromessenger/i.test(ua)) { return true; } return false; }
if (isWeixinBrowser()) {
div1.style.display = 'block'; // 显示div1
div2.style.display = 'none'; // 隐藏div2 }
else { div1.style.display = 'none'; // 隐藏div1
div2.style.display = 'block'; // 显示div2 }
};
同用css代码:
.browser-specific {
/* 这里可以添加一些通用的样式 */
}
div1和div2都默认被设置为display: none;(尽管div2在HTML中直接设置了样式,但你也可以在CSS中统一设置)。然后,当页面加载完成后,JavaScript会检查是否是微信浏览器,并据此设置div1和div2的display属性。