Question

我需要一个条件的JavaScript代码。

无需设置display：none code。它已经有效了。但我希望代码基于html / body class。

当body / html类是“gecko”时，只显示firefox div并从页面中删除所有其他div。喜欢：

 <body class="gecko">
 <div id="firefox"></div>
 <div id="ie"></div> [need to remove this]
 <div id="chrome"></div> [need to remove this]
 <div id="safari"></div> [need to remove this]
 </body>

当body / html类是chrome时，只显示chrome div并从页面中删除所有其他div。

<body class="chrome">
<div id="firefox"></div> [need to remove this]
<div id="ie"></div> [need to remove this]
<div id="chrome"></div>
<div id="safari"></div> [need to remove this]
</body>

当body / html类为空时，只显示IE div并从页面中删除所有其他div。

<body>
<div id="firefox">text here</div> [need to remove this]
<div id="ie"></div> 
<div id="chrome"></div> [need to remove this]
<div id="safari"></div> [need to remove this]
</body>

我不想设置display：none或visibility：hidden code。我想删除（）javascript代码。

我试过用这个。它适用于所有主流浏览器。检测浏览器并设置display：none;对于其他浏览器。您可以在此处查看css部分演示：http://www.downloadsaga.com/inboxace/。但是当我使用iframe时，它仍为其他div加载iframe。为此我需要一个代码，当它没有显示时无法加载iframe。

<?php require('css_browser_selector.php') ?>
<html class="<?php echo css_browser_selector() ?>">
<head>
<title>Browser Detect</title>

<style type="text/css">
.ie #firefox, .ie #chrome, .ie #opera, .ie #safari {
  display:none;
}
.gecko #chrome, .gecko #ie, .gecko #opera, .gecko #safari {
  display:none;
}
.win.gecko #chrome, .win.gecko #ie, .win.gecko #opera, .win.gecko #safari  {
  display:none;
}
.linux.gecko #chrome, .linux.gecko #ie, .linux.gecko #opera, .linux.gecko #safari  {
  display:none;
}
.opera #firefox, .opera #chrome, .opera #ie, .opera #safari  {
  display:none;
}
.safari #firefox, .safari #chrome, .safari #ie, .safari #opera  {
  display:none;
}
.chrome #firefox, .chrome #opera, .chrome #ie, .chrome #safari  {
    display:none;
}
.opera #opera {
display:block;
}
.chrome #chrome {
display:block;
}

html {overflow: auto;}
html, body, div, iframe {margin: 0px; padding: 0px; height: 100%; border: none;}
iframe {display: block; width: 100%; border: none; overflow-y: auto; overflow-x: hidden;} 

</style>


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    if ($("body").hasClass("gecko")){
    $( "#ie" ).remove();
    $( "#chrome" ).remove();
    $( "#safari" ).remove();
    $( "#opera" ).remove();
    } else if ($("body").hasClass("chrome")) {
    $( "#ie" ).remove();
    $( "#firefox" ).remove();
    $( "#safari" ).remove();
    $( "#opera" ).remove();
    }  else if ($("body").hasClass("")) {
    $( "#chrome" ).remove();
    $( "#firefox" ).remove();
    $( "#safari" ).remove();
    $( "#opera" ).remove();
    }  else if ($("body").hasClass("safari")) {
    $( "#ie" ).remove();
    $( "#firefox" ).remove();
    $( "#chrome" ).remove();
    $( "#opera" ).remove();
    }  else if ($("body").hasClass("opera")) {
    $( "#ie" ).remove();
    $( "#firefox" ).remove();
    $( "#safari" ).remove();
    $( "#chrome" ).remove();
    } 
});
</script>
</head>
<body class="webkit chrome win">
<div id="#content">
    <div id="firefox">
        <iframe src="firefox.html"  frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>
    </div>
    <div id="chrome">
        <iframe src="google.html"  frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe> 
    </div>
    <div id="ie">
        <iframe src="microsoft.html"  frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>
    </div>
    <div id="opera">
        <iframe src="opera.html"  frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>
    </div>
    <div id="safari">
        <iframe src="safari.html"  frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>
    </div>
</div>
</body>
</html>

任何专家解决方案？在这里你得到了css_browser_selector.php文件。 https://github.com/bastianallgeier/PHP-Browser-Selector

Answer 1

您可以使用Jquery hasClass方法

$(document).ready(function(){

    if ($("body").hasClass("gecko")){
    // display:none for other than firefox
    } else if ($("body").hasClass("chrome")) {
    // display:none for other than chrome
    } // continue your code
});

Answer 2

  first you will get body attribute class value and then store value variable 
and check if variable value is gecko means firefox div is enable and other divs are disable or 
if variable value is chrome means only chrome div is enable others to be disable 
 last condition for variable value null means is ie div enable and others to be disable
        $(document).ready(function(){
        var className=$("body").attr("class");
        if(className=='gecko')
        {

        $("#firefox").addClass('in');

        $("#ie").removeClass('in');

        $("#chrome").removeClass('in');

        $("#safari").removeClass('in');
        }
        else if(className=='chrome')
        {

        $("#firefox").removeClass('in');

        $("#ie").removeClass('in');

        $("#chrome").addClass('in');

        $("#safari").removeClass('in');
        }
        else if(className=='')
        {

        $("#firefox").removeClass('in');

        $("#ie").addClass('in');

        $("#chrome").removeClass('in');

        $("#safari").removeClass('in');
        }
        });

Using jquery 
first get body tag class attribute value
then check attribute value 
gecko,chrome and null
gecko means firefox div is enable using addClass Property
chrome means chrome div is enable using addClass Property
null means ie div is enable using addClass Property

需要条件的JavaScript代码

2 个答案: