1

jQuery などを使用してユーザーを新しいページにリダイレクトする代わりに、単一のページのコンテンツを変更する方法を探しています。私はスクリプト作成にまったく慣れていないので、助けていただければ幸いです。

先に進み、サイトの基本的なレイアウトと、ユーザーが別のページを要求したときに変更したいコンテンツを示す簡単なモックアップを jsFiddle で作成しました。

http://jsfiddle.net/Syrne/8pMnR/

コード：

HTML:

<div class="container">
    <div class="navbar">
        <div id="navWrap" class="container">
            <div class="nav-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a>

                    </li>
                    <li><a href="#">Link 1</a>

                    </li>
                    <li><a href="#">Link 2</a>

                    </li>
                    <li class="dropdown">   <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop <b class="caret"></b></a>

                        <ul class="dropdown-menu">
                            <li>
                                <!-- DoW -->
                                <li class="dropdown-submenu">   <a tabindex="-1" href="#">Menu</a>

                                    <ul class="dropdown-menu">
                                        <li><a tabindex="-1" href="#">Option 1</a>

                                        </li>
                                        <li><a tabindex="-1" href="#">Option 2</a>

                                        </li>
                                        <li><a tabindex="-1" href="#">Option 3</a>

                                        </li>
                                    </ul>
                                </li>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <hr></hr>
    <div id="main_page">
        <p><b>MAIN CONTENT</b></p>
        <p>This content should change dynamically when a user follows a page link.</p>
        <hr></hr>
    </div>
    <div class="footer">
        <p>&copy; 2013</p>
    </div>
</div>

CSS:

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 .dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}
.dropdown-submenu>a:after {
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}
#main_page {
    text-align: center;
}

.footer {
    text-align: center;
}

.navbar .nav,
.navbar .nav > li {
  float:none;
  display:inline-block;

  vertical-align: top;
}

#navWrap {
    text-align: center;
}
}

ご覧のとおり、サイトの中央の領域でアクションが発生するはずです。残り (ナビゲーション バーとフッター) は固定されたままにする必要があります。

参考までに、コンテンツの変更ごとに固有の URL を保持するために、jQuery、「Modernizr」、および HTML5 の履歴 API を利用するこのガイドを作成しました。これはまさに私がやりたいことですが、現在のデザインで機能させる方法に頭を悩ませているようには見えません。途中で私を助けるための軽いヒントであっても、どんな助けも大歓迎です。私はWebデザイン/開発に非常に慣れていないため、学ぶことがたくさんあります.

4

2 に答える 2