3
回答
请问下js如何实显这种功效果,,希望有个例子参考。
利用AWS快速构建适用于生产的无服务器应用程序,免费试用12个月>>>   

 

如图效果,上面有一行导航。每点击一个导航背景颜色改变,点击导航后对应的下方的内容突出。谢谢各位大神 

<无标签>
举报
百事通
发帖于6个月前 3回/199阅

采用JQ和CSS,当点击到位置的时候,改变所需要改变的位置的css样式就应该能显示出来你需要的效果了吧。可能方法还是有一点缺陷,我觉得这个思路应该是对的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .divsm {
                width: 100px;
                height: 20px;
                border: 1px solid pink;
                float: left;
            }
            
            .divsm2 {
                width: 100px;
                height: 20px;
                border: 1px solid black;
                float: left;
                background-color: yellow;
            }
            
            .divclear {
                clear: both;
                height: 60px;
            }
            
            .divmd {
                width: 150px;
                height: 150px;
                border: 1px solid black;
                float: left;
            }
            
            .divmd2 {
                width: 200px;
                height: 200px;
                border: 1px solid black;
                position: relative;
                margin-left: 0px;
                margin-top: -15px;
                float: left;
            }
        </style>
        <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
        <script>
            function clickdiv(num) {
                $("#divs1").prop("class", "divsm")
                $("#divs2").prop("class", "divsm")
                $("#divs3").prop("class", "divsm")
                $("#divs4").prop("class", "divsm")
                $("#divs" + num).prop("class", "divsm2")
                $("#divm1").prop("class", "divmd")
                $("#divm2").prop("class", "divmd")
                $("#divm3").prop("class", "divmd")
                $("#divm4").prop("class", "divmd")
                $("#divm" + num).prop("class", "divmd2")
            }
        </script>
    </head>

    <body>

        <div id="divs1" class="divsm" onclick="clickdiv(1)"></div>
        <div id="divs2" class="divsm" onclick="clickdiv(2)"></div>
        <div id="divs3" class="divsm" onclick="clickdiv(3)"></div>
        <div id="divs4" class="divsm" onclick="clickdiv(4)"></div>

        <div class="divclear"></div>

        <table border="0" align="center">
            <tr>
                <td width="150px" height="150px">
                    <div id="divm1" class="divmd" style="background-color: green;"></div>
                </td>
                <td width="150px" height="150px">
                    <div id="divm2" class="divmd" style="background-color: yellow;"></div>
                </td>
                <td width="150px" height="150px">
                    <div id="divm3" class="divmd" style="background-color: gainsboro;"></div>
                </td>
                <td width="150px" height="150px">
                    <div id="divm4" class="divmd" style="background-color: deeppink;"></div>
                </td>
            </tr>
        </table>

    </body>

</html>

--- 共有 1 条评论 ---
百事通请问如何点击空白处还原特效呢 6个月前 回复

引用来自“开源王大锤”的评论

采用JQ和CSS,当点击到位置的时候,改变所需要改变的位置的css样式就应该能显示出来你需要的效果了吧。可能方法还是有一点缺陷,我觉得这个思路应该是对的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            .divsm {
                width: 100px;
                height: 20px;
                border: 1px solid pink;
                float: left;
            }
            
            .divsm2 {
                width: 100px;
                height: 20px;
                border: 1px solid black;
                float: left;
                background-color: yellow;
            }
            
            .divclear {
                clear: both;
                height: 60px;
            }
            
            .divmd {
                width: 150px;
                height: 150px;
                border: 1px solid black;
                float: left;
            }
            
            .divmd2 {
                width: 200px;
                height: 200px;
                border: 1px solid black;
                position: relative;
                margin-left: 0px;
                margin-top: -15px;
                float: left;
            }
        </style>
        <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
        <script>
            function clickdiv(num) {
                $("#divs1").prop("class", "divsm")
                $("#divs2").prop("class", "divsm")
                $("#divs3").prop("class", "divsm")
                $("#divs4").prop("class", "divsm")
                $("#divs" + num).prop("class", "divsm2")
                $("#divm1").prop("class", "divmd")
                $("#divm2").prop("class", "divmd")
                $("#divm3").prop("class", "divmd")
                $("#divm4").prop("class", "divmd")
                $("#divm" + num).prop("class", "divmd2")
            }
        </script>
    </head>

    <body>

        <div id="divs1" class="divsm" onclick="clickdiv(1)"></div>
        <div id="divs2" class="divsm" onclick="clickdiv(2)"></div>
        <div id="divs3" class="divsm" onclick="clickdiv(3)"></div>
        <div id="divs4" class="divsm" onclick="clickdiv(4)"></div>

        <div class="divclear"></div>

        <table border="0" align="center">
            <tr>
                <td width="150px" height="150px">
                    <div id="divm1" class="divmd" style="background-color: green;"></div>
                </td>
                <td width="150px" height="150px">
                    <div id="divm2" class="divmd" style="background-color: yellow;"></div>
                </td>
                <td width="150px" height="150px">
                    <div id="divm3" class="divmd" style="background-color: gainsboro;"></div>
                </td>
                <td width="150px" height="150px">
                    <div id="divm4" class="divmd" style="background-color: deeppink;"></div>
                </td>
            </tr>
        </table>

    </body>

</html>

正解,非常的好,就是要这样一个效果

顶部