Javascript 显示隐藏JS div css_Javascript_Css

Javascript 显示隐藏JS div css

javascript css

Javascript 显示隐藏JS div css,javascript,css,Javascript,Css,我熟悉php，但对js非常认真，我尝试了3种方法来实现我的目标，我看到下面使用的方法似乎是最容易实现的，因此我可以实现我的目标，但由于某种原因它不起作用。我只为不工作的特定函数包含了必要的位，这些都在基于db中条目的while循环中工作，用{$page_trackid}分隔，以区分每个函数及其链接我知道可以使用“this”风格的函数，但正如我所说，我对js来说太陌生了，我只是想在扩展到更复杂之前实现必要的功能这里有什么我完全做错的吗干杯 <head> <styl

我熟悉php，但对js非常认真，我尝试了3种方法来实现我的目标，我看到下面使用的方法似乎是最容易实现的，因此我可以实现我的目标，但由于某种原因它不起作用。我只为不工作的特定函数包含了必要的位，这些都在基于db中条目的while循环中工作，用{$page_trackid}分隔，以区分每个函数及其链接

我知道可以使用“this”风格的函数，但正如我所说，我对js来说太陌生了，我只是想在扩展到更复杂之前实现必要的功能

这里有什么我完全做错的吗

干杯

<head>

    <style>
        .hidden {display:none;}
        .visible {display:block;}

        .subtext_img {
            width: 100px; height: 100px; padding-top: 10px; padding-right: 10px; float: right;
        }

        .subtext {
            padding-left: 10px;
        }
        .arrow_box { padding-left: 100px; position: absolute; z-index: 100; background: #88b7d5; border: 4px solid #c2e1f5; width: 580px; height: 120px;} .arrow_box:after, .arrow_box:before { left: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-color: rgba(136, 183, 213, 0); border-left-color: #88b7d5; border-width: 10px; top: 30%; margin-top: -10px; } .arrow_box:before { border-color: rgba(194, 225, 245, 0); border-left-color: #c2e1f5; border-width: 16px; top: 30%; margin-top: -16px; }


    </style>
</head>
<body>


    <?
    $data = mysql_query("SELECT * FROM user_Uploaded_Tracks WHERE username = '$user' ORDER BY datetime DESC")
            or die(mysql_error());

    $page_trackid = '1'; //reset page track id
    // get a whole bunch of data, track info & user info based on some cross referencing via id
    while ($info = mysql_fetch_array($data)) {

        $db_trackid = $info['id'];
        $username = $info['username'];

        //data 2 track info based on db track id
        $data2 = mysql_query("SELECT * FROM user_Uploaded_Tracks WHERE id = '$db_trackid' LIMIT 1")
                or die(mysql_error());

        $info2 = mysql_fetch_array($data2);


        //data 3 is user profile data based on db track id
        $data3 = mysql_query("SELECT * FROM users WHERE username = '$username' LIMIT 1")
                or die(mysql_error());

        $info3 = mysql_fetch_array($data3);

        //data 4 profile image based on user id, track uploader*
        $data4 = mysql_query("SELECT * FROM user_profile_pic WHERE username = '$username' ORDER BY datetime DESC LIMIT 1")
                or die(mysql_error());

        $info4 = mysql_fetch_array($data4);

        echo "
        <script>
            function showbox(userinfo_{$page_trackid}){
                document.getElementById(userinfo_{$page_trackid}).style.visibility='visible';
            }

            function hidestuff(userinfo_{$page_trackid}){
                document.getElementById(userinfo_{$page_trackid}).style.visibility='hidden';
            }
        </script>
        <div id='userinfo_{$page_trackid}'  class='arrow_box' style='display: none;'>  <img src='" . $info4['Image'] . "' class='subtext_img'>
            <h2 class='subtext'><a href='http://XXXX/XXX/" . $info2['username'] . "'>" . $info2['username'] . "</a></h2>
            <p class='subtext'>" . $info3['user_title'] . "</p>
            <p class='subtext'><a href='" . $info3['website_link'] . "' target='_blank'>" . $info3['website_link'] . "</a>

            </p>

        </div>";

        echo "
            <div style='position: absolute; z-index: 1; width: 20px; height: 20px; padding-top: 50px; padding-left: 699px;'>
                <a href='javascript:showbox_{$page_trackid}()'><img style='height: 20px;' alt='Track stats' src='http://XXXXXX/play1/skin/user-profile2.png' style=''></a>
            </div>";
    }
    ?>
</body>


.hidden{显示：无；}
.visible{显示：块；}
.潜台词{
宽度：100px；高度：100px；填充顶部：10px；填充右侧：10px；浮动：右侧；
}
.潜台词{
左侧填充：10px；
}
.arrow_-box{padding left:100px；位置：绝对；z-index:100；背景：88b7d5；边框：4px实心#c2e1f5；宽度：580px；高度：120px；}。arrow_-box:after，.arrow_-box:before{left:100%；边框：实心透明；内容：；高度：0；宽度：0；位置：绝对；指针事件：无；}。arrow_-box:after{边框颜色：rgba（136，183，213，0）；边框左侧颜色：#88b7d5；边框宽度：10px；顶部：30%；边距顶部：-10px；}。箭头框：在{边框颜色：rgba（194，225，245，0）之前；边框左侧颜色：#c2e1f5；边框宽度：16px；顶部：30%；边距顶部：-16px；}
：避免在javascript中直接操作元素的样式。样式设置属于css
下面是我要做的：
CSS
Javascript:
// show an element
document.getElementById("my-id").classList.remove("hidden");

// hide an element
document.getElementById("my-id").classList.add("hidden");

旧浏览器不支持classList，因此请确保在
中包含polyfill。您的问题似乎是在HTML中将display属性设置为none，但在脚本中设置visibility属性。它们是不同的东西。在两个位置都设置一个或另一个。啊！缩进不好，跳过问题。有没有你考虑过使用一两个连接从数据库中获取数据吗？“不起作用”不是一个合适的描述。请描述您正在尝试做什么以及实际发生了什么，包括错误消息。由于这是一个客户端javascript问题，请发布客户端收到的HTML，而不是生成它的PHP。建议添加和删除类是一个好主意，但推荐一个在很多使用中的浏览器中都不起作用。链接的垫片至少在IE 8和更低版本中不起作用，在各种设备中可能还有许多其他不太常见的浏览器。另一种选择是一个非常简单的添加/删除类函数，它可以在任何地方工作。我也想这样做，但事实并非如此。尽管有一条注释说明兼容性是可以的对我来说；）@bart是的，误读了兼容性声明。但还有许多其他浏览器与IE7同舟共济。请注意，大多数浏览器统计数据不会告诉您版本号（通常IE除外），而且一些浏览器升级与操作系统升级有关，因此旧版本的挂起时间比您想象的要长得多，例如，在OS X 10.5及更低版本中缺少Safari支持。@RobG我不能否认它不是100%兼容的，但现在几乎没有任何东西是兼容的。这是一个恶性循环：如果你继续支持旧浏览器，它们永远不会消失。如果他们不死，你会觉得有必要继续支持他们。我说：没有classList（或polyfill）支持的浏览器的市场份额是微不足道的。”……它不是100%兼容的……几乎没有什么是”。有一些策略可以与使用中的几乎所有用户代理兼容，这并不困难。“如果你继续支持旧浏览器，它们将永远不会消失。”作为一名开发人员，你不应该告诉用户他们应该在web上使用什么用户代理。如果是这样的话，在有一个完善的解决方案的情况下不支持旧的浏览器并不是一个好的策略。
// show an element
document.getElementById("my-id").classList.remove("hidden");

// hide an element
document.getElementById("my-id").classList.add("hidden");