3

CSSとHTMLだけを使ってタブ付きメニューを作成してみることにしました。:target疑似クラスを使用して適切なものを表示し、div実装しましたが、少しジャンプしすぎてユーザーフレンドリーにはなりません。

http://brad.sebdengroup.com/newodynsite/stockman.php#StockControl

とにかくこれを修正できますか？当初はJavaScriptを避けたかったのですが、これが修正されれば喜んで追加します。

注：jQuery /いくつかの豪華なライブラリを使用して新しいタブ付きメニューを再構築できることはわかっていますが、可能であれば、これを修正したいと思います。

4

8 に答える 8

8

これは、アンカーでハッシュ値を使用しているためです。これらにより、ハッシュで指定されたIDのdivにジャンプします。

これを並べ替えるには、jQueryを使用して、を使用してジャンプを停止できます。.preventDefault();

これを使用するには、のクラスをジャンプするすべてのアンカーをprevent指定し、jQueryを使用してジャンプを停止します。もちろん、HTML構造に応じてこのセレクターを変更できます。

$(".prevent").click(function(e) { //Note the e for event
  e.preventDefault();
});

jQueryなしで編集

jQueryが機能しないことを罵倒した後、私は純粋なjsソリューションをまとめようとしました。これをチェックして、ページで機能することを確認する必要があります。

これがjsfiddleの例です。

私が行ったことは、ページ上のすべてのアンカーが見つかり、onclick属性にreturnfalseを追加したことです。これがライブサイトで行われる場合は、アンカーをさらに選択する必要があります。この例と説明を参照してください。

また、ジャンプしたくないアンカーにクラスを追加しました。これを使用するには、ジャンプを停止するアンカーに「menuControl」のクラスを追加する必要があります。

以下は、jsfiddleリンクが壊れた場合のJavaScriptです。言及するだけですが、JavaScriptを使用return falseするとナビゲーションが停止するため、JavaScriptを使用してこれらのタブのナビゲーションを制御する必要があります。

var anchors = document.getElementsByTagName("a");

for(var i = 0; i < anchors.length; i++) {
    if ( anchors[i].className == "menuControl" ) {
        anchors[i].setAttribute("onclick", "return false");
    }
} ​
于 2012-07-27T18:29:40.067 に答える
2

window.scrollTo(0, 0);クリックするたびにドキュメントの先頭に戻るために使用できますが、ほとんどの場合、ユーザーが気付くには速すぎます。

ドキュメント

水平ジャンプの場合overflow-y: scroll、スクロールを引き起こすのに十分なコンテンツがない場合でも、スクロールバーが常にページ上にあるように体に使用できます。

于 2012-07-27T18:26:15.357 に答える
2

ページの最小の高さを、divがcssで一番上に移動するために必要な高さに設定できます。

body { min-height: 1000px; }

1000pxを必要な数のpxに置き換えます。

これにより、ブラウザビューがdivをターゲットにする最初のクリックを超えてジャンプするのを防ぐことができます。

これは、[販売注文処理]をクリックしてから、[現在のようにWorks注文処理]をクリックするようなものです。ページの読み込み時に余分な空白をすべて残したくない場合は、タブがクリックされたときにのみ高さを設定できます。

于 2012-07-28T04:27:42.213 に答える
1

jQueryを使用してスムーズにスクロールします。ここに良いデモがあります。

于 2012-07-27T18:30:50.693 に答える
1 
$(window).scroll(function () { 
       var newTop = $(window).scrollTop();
       if (newTop <= 130){
            newTop = 130;
       }
       $("#idofElementToScroll").stop()
       .animate({'top': newTop}, "slow");
});

これは、私が個人サイトのプライベートセクションで作成および実装した関数です。

ここで起こっていることは、現在画面上のどこにいるかを宣言していることです。次に、スクロールしている要素を下にスクロールすると、スムーズにスクロールします。

あなたがアンカーを動かすことを求めていたのは知っていますが、この機能をその目的に非常に簡単に適合させることができます。

「130」は、移動要素をウィンドウの上部から移動する最小距離を指していることに注意してください。

幸運を！

于 2012-07-27T18:33:43.433 に答える
1

コンテナの高さが非常に異なるため、問題が発生します。

すべてのコンテンツコンテナをスタイルのないdivでラップすることをお勧めします。次に、すべてのコンテナをループします。コンテナの最大高さを計算します。次に、すべてのラッピングdivにこの最大の高さを指定します。

于 2012-08-04T07:58:13.557 に答える
0

別の提案があります：

<style>
    nav ~ div {
        display: none;
    }

    .tab {
        position:fixed;
        top:0;
    }

    :target:not([id="box1"]) ~ .box1 {
        display: none;
    }

    #box1:target ~ nav .box1,
    #box2:target ~ nav .box2,
    #box3:target ~ nav .box3 {
        color:red;
    }

    #box1:target ~ div.box1,
    #box2:target ~ div.box2,
    #box3:target ~ div.box3 {
        display:block;
    }
</style>

<section id="content">
    <div id="box1" class="tab"></div>
    <div id="box2" class="tab"></div>
    <div id="box3" class="tab"></div>
    <nav>
         <a href="#box1" class="box1">box1</a>
         <a href="#box2" class="box2">box2</a>
         <a href="#box2" class="box3">box3</a>
    </nav>
    <div class="box1">
         blah
    </div>
    <div class="box2">
         blah
    </div>
    <div class="box3">
         blah
    </div>
</section>

アンカーが修正されているので、それでうまくいくはずです。一度ジャンプすることはできますが、その後はジャンプしません。

于 2013-03-21T15:03:44.757 に答える
0

Stu Nichollsの例に従って、この問題を回避するには、ターゲットの疑似クラスで兄弟セレクターを使用しますが、 Webkitのバグに注意してください。

<!doctype html>
<html lang="en">
<head>
    <title>CSS Target Navigation</title>
    <style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/cssplay-page-menu.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

#cssplayPages {width:690px; height:400px; position:relative; margin:20px auto;}
#cssplayPages #navigate {padding:0; margin:35px 0 0 0; list-style:none; width:160px; text-align:right; float:left;}
#cssplayPages #navigate li {float:left; width:160px; margin:0 0 5px 0;}
#cssplayPages #navigate li a {display:block; width:140px; padding:0 10px; background:#ddd; font:bold 13px/35px arial, sans-serif; text-decoration:none; color:#000; border-radius:5px;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
}
#cssplayPages #navigate li a:hover {background:#6cf;}

#cssplayPages #navigate.john a {background:#6cf;}

.targets {display:none;}
#cssplayPages div {position:absolute; width:0; left:190px; top:0; opacity:0; height:0px; overflow:hidden;
-moz-transition: 1.5s;
-ms-transition: 1.5s;
-o-transition: 1.5s;
-webkit-transition: 1.5s;
transition: 1.5s;
}
#cssplayPages div.constable {height:400px; width:500px; opacity:1;}

#cssplayPages div img {float:left; padding:0 10px 10px 0;}
#cssplayPages div h2 {padding:0 0 10px 0; margin:0; font: 24px/24px arial, sans-serif;}
#cssplayPages div p {padding:0 0 10px 0; margin:0; font: 13px/18px arial, sans-serif; text-align:justify;}


#constable:target ~ #navigate .john a {background:#6cf;}
#constable:target ~ .constable {height:400px; width:500px; opacity:1;}

#monet:target ~ #navigate .claude a {background:#6cf;}
#monet:target ~ #navigate .john a {background:#ddd;}
#monet:target ~ #navigate .john a:hover {background:#6cf;}
#monet:target ~ .constable {height:0; width:0; opacity:0;}
#monet:target ~ .monet {height:400px; width:500px; opacity:1;}

#vangogh:target ~ #navigate .vincent a {background:#6cf;}
#vangogh:target ~ #navigate .john a {background:#ddd;}
#vangogh:target ~ #navigate .john a:hover {background:#6cf;}
#vangogh:target ~ .constable {height:0; width:0; opacity:0;}
#vangogh:target ~ .vangogh {height:400px; width:500px; opacity:1;}

#chagall:target ~ #navigate .marc a {background:#6cf;}
#chagall:target ~ #navigate .john a {background:#ddd;}
#chagall:target ~ #navigate .john a:hover {background:#6cf;}
#chagall:target ~ .constable {height:0; width:0; opacity:0;}
#chagall:target ~ .chagall {height:400px; width:500px; opacity:1;}

#picasso:target ~ #navigate .pablo a {background:#6cf;}
#picasso:target ~ #navigate .john a {background:#ddd;}
#picasso:target ~ #navigate .john a:hover {background:#6cf;}
#picasso:target ~ .constable {height:0; width:0; opacity:0;}
#picasso:target ~ .picasso {height:400px; width:500px; opacity:1;}
</style>

</head>
<body>
    <div id="cssplayPages">
    <b class="targets" id="constable"></b>
    <b class="targets" id="monet"></b>
    <b class="targets" id="vangogh"></b>
    <b class="targets" id="chagall"></b>
    <b class="targets" id="picasso"></b>
    <ul id="navigate">
        <li class="john"><a href="#constable" onClick="history.go(1)">John Constable &#9755;</a></li>
        <li class="claude"><a href="#monet" onClick="history.go(1)">Claude Monet &#9755;</a></li>
        <li class="vincent"><a href="#vangogh" onClick="history.go(1)">Vincent Van Gogh &#9755;</a></li>
        <li class="marc"><a href="#chagall" onClick="history.go(1)">Marc Chagall &#9755;</a></li>
        <li class="pablo"><a href="#picasso" onClick="history.go(1)">Pablo Picasso &#9755;</a></li>
    </ul>
    <div class="constable">
        <h2>John Constable</h2>
        <img src="painters/constable2.jpg" alt="The Hay Wain" title="The Hay Wain" />
        <p>Although he showed an early talent for art and began painting his native Suffolk scenery before he left school, his great originality matured slowly.</p>
        <p>He committed himself to a career as an artist only in 1799, when he joined the Royal Academy Schools and it was not until 1829 that he was grudgingly made a full Academician, elected by a majority of only one vote.</p>
        <p>In 1816 he became financially secure on the death of his father and married Maria Bicknell after a seven-year courtship and in the fact of strong opposition from her family. During the 1820s he began to win recognition: The Hay Wain (National Gallery, London, 1821) won a gold medal at the Paris Salon of 1824 and Constable was admired by <a href="http://www.ibiblio.org/wm/paint/auth/delacroix/">Delacroix</a> and Bonington among others.</p>
        <p>His wife died in 1828, however, and the remaining years of his life were clouded by despondency.</p>
        <p>This text is an excerpt from <a href="http://www.ibiblio.org/wm/paint/auth/constable/">The&nbsp;WebMuseum,&nbsp;Paris</a></p>
    </div>
    <div class="monet">
        <h2>Claude Monet</h2>
        <img src="painters/monet2.jpg" alt="Women in the Garden" title="Women in the Garden" />
        <p>His youth was spent in Le Havre, where he first excelled as a caricaturist but was then converted to landscape painting by his early mentor <a href="http://www.ibiblio.org/wm/paint/auth/boudin/">Boudin</a>, from whom he derived his firm predilection for painting out of doors.</p>
        <p>In 1859 he studied in Paris at the Atelier Suisse and formed a friendship with <a href="http://www.ibiblio.org/wm/paint/auth/pissarro/">Pissarro</a>. After two years' military service in Algiers, he returned to Le Havre and met <a href="http://www.ibiblio.org/wm/paint/auth/jongkind/">Jongkind</a>, to whom he said he owed `the definitive education of my eye'.</p>
        <p>He then, in 1862, entered the studio of Gleyre in Paris and there met Renoir, Sisley, and Bazille, with whom he was to form the nucleus of the Impressionist group.</p> 
        <p>Monet's devotion to painting out of doors is illustrated by the famous story concerning one of his most ambitious early works, Women in the Garden (Mus&#233;e d'Orsay, Paris; 1866-67). The picture is about 2.5 meters high and to enable him to paint all of it outside he had a trench dug in the garden so that the canvas could be raised or lowered by pulleys to the height he required.</p>
        <p>This text is an excerpt from <a href="http://www.ibiblio.org/wm/paint/auth/monet/">The&nbsp;WebMuseum,&nbsp;Paris</a></p>
    </div>
    <div class="vangogh">
        <h2>Vincent Van Gogh</h2>
        <img src="painters/vincent2.jpg" alt="The Starry Night" title="The Starry Night" />
        <p>Gogh, Vincent (Willem) van (b. March 30, 1853, Zundert, Neth.--d. July 29, 1890, Auvers-sur-Oise, near Paris), generally considered the greatest Dutch painter and draughtsman after <a href="http://www.ibiblio.org/wm/paint/auth/rembrandt/">Rembrandt</a>.</p>
        <p>With <a href="http://www.ibiblio.org/wm/paint/auth/cezanne/">C&#233;zanne</a> and <a href="http://www.ibiblio.org/wm/paint/auth/gauguin/">Gauguin</a> the greatest of Post-Impressionist artists. He powerfully influenced the current of <a href="http://www.ibiblio.org/wm/paint/glo/expressionism/">Expressionism</a> in modern art. His work, all of it produced during a period of only 10 years, hauntingly conveys through its striking colour, coarse brushwork, and contoured forms the anguish of a mental illness that eventually resulted in suicide. Among his masterpieces are numerous self-portraits and the well-known <a href="http://www.ibiblio.org/wm/paint/auth/gogh/starry-night/">The&nbsp;Starry&nbsp;Night</a> (1889).</p> 
        <p>This text is an excerpt from <a href="http://www.ibiblio.org/wm/paint/auth/gogh/">The&nbsp;WebMuseum,&nbsp;Paris</a></p>
    </div>
    <div class="chagall">
        <h2>Marc Chagall</h2>
        <img src="painters/chagall2.jpg" alt="Adam and Eve" title="Adam and Eve" />
        <p>Russian-born French painter. Born to a humble Jewish family in the ghetto of a large town in White Russia, Chagall passed a childhood steeped in Hasidic culture.</p>
        <p>Very early in life he was encouraged by his mother to follow his vocation and she managed to get him into a St Petersburg art school. Returning to Vitebsk, he became engaged to Bella Rosenfeld (whom he married twelve years later), then, in 1910, set off for Paris, 'the Mecca of art'.</p>
        <p>He was a tenant at La Ruche, where he had Modigliani and Soutine for neighbours. His Slav Expressionism was tinged with the influence of <a href="http://www.artchive.com/artchive/D/daumier.html">Daumier</a>, Jean-Fran&#231;ois Millet, the Nabis and the Fauves.</p>
        <p>He was also influenced by <a href="http://www.artchive.com/artchive/cubism.html">Cubism</a>. Essentially a colourist, Chagall was interested in the Simultaneist vision of Robert Delaunay and the Luminists of the Section d'Or.</p>
    </div>
    <div class="picasso">
        <h2>Pablo Picasso</h2>
        <img src="painters/picasso2.jpg" alt="Girtl in front of mirror" title="Girtl in front of mirror" />
        <p>Pablo Picasso, born in Spain, was a child prodigy who was recognized as such by his art-teacher father, who ably led him along.</p>
        <p>The small Museo de Picasso in Barcelona is devoted primarily to his <a href="http://www.artchive.com/artchive/P/picasso_early.html">early works</a>, which include strikingly realistic renderings of casts of ancient sculpture.</p>
        <p>He was a rebel from the start and, as a teenager, began to frequent the Barcelona cafes where intellectuals gathered.</p>
        <p>He soon went to Paris, the capital of art, and soaked up the works of Manet, Gustave Courbet, and <a href="http://www.artchive.com/artchive/T/toulouse-lautrec.html">Toulouse-Lautrec</a>, whose sketchy style impressed him greatly. Then it was back to Spain, a return to France, and again back to Spain - all in the years 1899 to 1904.</p>
    </div>
</div>

            <p class="info">copyright &copy; stu nicholls - CSS play</p>

        </div> <!-- end info -->

</body>
</html>
于 2012-08-04T16:17:39.227 に答える