Question

所以我使用.load()在div中加载了一个页面。

现在我有两个问题：

如何将加载的页面大小限制在其容器中？

或者，我如何控制加载的页面大小？
如何使用js函数从容器页面影响已加载页面的div？

容器页面：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        #box {
            width: 400px;
            height: 400px;
            overflow: hidden;
        }
        #box h2 {
            padding-left: 10px;
            line-height: 5px;
            font-size: 18px;
            font-weight: bold;
        }
        .view-picker {
            height: 100px;
            text-align: center;
            padding-top: 20px;
        }
        .view {
            position: fixed;
            background: #eee;
        }
        .active {
            background: #ddd;
        }
        .btn {
            background: #ccc;
        }
        .input-group label{
            margin-right: 30px;
        }
        @media(max-width:500px){
            .view-picker {
                font-size: 20px;
            }
        }
        @media(min-width:500px){
            .view-picker {
                font-size: 30px;
            }
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        $(function(){
            $("#box").load("page2.php");
        });
    </script>
</body>
</html>

加载的页面：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        html, body {
            margin: 0px;
            padding: 0px;
            overflow-x: hidden;
        }
        .wrapper {
            width: 100%;
        }
        .one {
            position: fixed;
            width: 15%;
            z-index: 0;
        }
        .two {
            position: fixed;
            width: 85%;
            left: 15%;
            background: #ddd;
            z-index: 1;
        }
        .three {
            width:32%;
            display: inline-block;
        }
        .view-picker {
            display: block;
        }
        .view {
            position: fixed;
            width: 100%;
            height: 100%;
        }
        form {
            padding: 25px;
        }
    </style>
</head>
<body>
    <div class="one" id="view-picker-list">
        <a href="#" class="view-picker" value="avl"></a>
        <a href="#" class="view-picker" value="fnd"></a>
        <a href="#" class="view-picker" value="ock"></a>
    </div>
    <div class="two">
        <div class="view" id="avl">
            <h2>Page 1</h2>
        <div class="view" id="fnd">
            <h2>Page 2</h2>
        </div>
        <div class="view" id="ock">
            <h2>Page 3</h2>
        </div>
    </div>
<!-- show/hide functions -->
    <script>
        $(function(){
            $("#fnd").hide();
            $("#ock").hide();
            $("a[value='avl']").addClass("active");

            var showit = '';

            $(".view-picker").click(function(){
                showit = $(this).attr('value');
                $(".view:not(#" + showit + ")").slideUp("slow");
                $(".view-picker:not(this)").removeClass("active");
                $('#' + showit).slideDown("slow");
                $(this).addClass("active");
            });
        });
    </script>
</body>
</html>

控制加载了jQuery的页面

0 个答案: