0

コーディングが初めてなので、助けてください。垂直ナビゲーションのスライド コードがあります。ユーザーがナビゲーションにカーソルを合わせると、右にスライドします。ユーザーがナビゲーションをクリックすると、アクティブなままにしたい。どうすればそれを行うことができますか？ビジュアルへのリンクはこちら

http://edgecastcdn.net/00009B//TEMP/NAV/index.html

あなたが助けてくれた見返りに、ここにあなたたちが楽しめるかもしれないジョークがあります（まだ聞いたことがない場合）

ある妻が、コンピューター プログラマーである夫に尋ねます。「私のために店に行って、牛乳を1カートン買って、卵があれば6個ください！」

しばらくして、夫が 6 カートンの牛乳を持って戻ってきました。

妻は彼に、「どうして牛乳を 6 カートンも買ったの?」と尋ねます。

彼は「彼らは卵を持っていた」と答えた。

みんなありがとう、どんな助けでも大歓迎です！これがコードです。cssも必要でしたら教えてください。

$(document).ready(function(){
    slide("#sliding-navigation", 30, 15, 150, .8);
});

function slide(navigation_id, pad_out, pad_in, time, multiplier){
// creates the target paths
var list_elements = navigation_id + " li.sliding-element";
var link_elements = list_elements + " a";

// initiates the timer used for the sliding animation
var timer = 0;

// creates the slide animation for all list elements 
$(list_elements).each(function(i)
{
    // margin left = - ([width of element] + [total vertical padding of element])
    $(this).css("margin-left","-180px");
    // updates timer
    timer = (timer*multiplier + time);
    $(this).animate({ marginLeft: "0" }, timer);
    $(this).animate({ marginLeft: "12px" }, timer);
    $(this).animate({ marginLeft: "0" }, timer);
});

// creates the hover-slide effect for all link elements         
$(link_elements).each(function(i)
{
    $(this).hover(
    function()
    {
        $(this).animate({ paddingLeft: pad_out }, 150);
    },      
    function()
    {
        $(this).animate({ paddingLeft: pad_in }, 150);
    });

});

}

これが私のCSSコードです（Douglasの「アクティブな」コードで更新されました）ありがとう！

body 
{
margin: 0;
padding: 0;
background: #1d1d1d;
font-family: "Lucida Grande", Verdana, sans-serif;
font-size: 100%;
}

h2  
{ 
color: #999;
margin-bottom: 0; 
margin-left:13px;
background:url(navigation.jpg) no-repeat;
height:40px;
}

h2 span
{
display: none;
}

p   navigation-block
{ 
color: #00b7e6; 
margin-top: .5em;
font-size: .75em;
padding-left:15px;  
}

#navigation-block {
position:relative;
}

#hide {
position:absolute;
top:30px;
left:-190px;
}

ul#sliding-navigation
{
list-style: none;
font-size: 0.75em;
margin: 30px 0;
padding: 0;
}

ul#sliding-navigation li.sliding-element h3,
ul#sliding-navigation li.sliding-element a
{
display: block;
width: 150px;
padding: 2px 18px;
margin: 0;
margin-bottom: 0px;
}

ul#sliding-navigation li.sliding-element h3
{
color: #fff;
background:#333333 url(heading_bg.jpg) repeat-y;
padding-top: 7px;
padding-bottom: 7px;
}

ul#sliding-navigation li.sliding-element a
{
color: #999;
background:#222 url(tab_bg.jpg) repeat-y;
border: 1px solid #1a1a1a;
text-decoration: none;
}

ul#sliding-navigation li.sliding-element a.selected { color: #cc0000; }
{
color: #FFF;
margin-top: 0.5em;
font-size: 10pt;
padding-left:15px;
font-weight: bolder;
}

ul#sliding-navigation li.sliding-element a:hover { color: #00b7e6; background:#2a2a2a; }
#navigation-block p {
color: #FFF;
margin-top: 0.5em;
font-size: 10pt;
padding-left:15px;
font-weight: bolder;
}


.active{
  padding-left:12px;
  /*Add whatever other styles you need */
}
4

1 に答える 1

0

あなたのナビゲーションは実際にはページを変更せず、ページに新しいコンテンツをロード (または切り替え) しているようです。

ユーザーがリンクをクリックした後もこれを維持する最も簡単な方法は、正しい設定でクラスを追加することです。例えば：

jQuery

$(link_elements).hover(
  function()
  {
    $(this).animate({ paddingLeft: pad_out }, 150);
  },      
  function()
  {
    $(this).animate({ paddingLeft: pad_in }, 150);
  }
).click(function(){
  $(link_elements).removeClass("active");
  $(this).addClass("active");
});

CSS

.active{
  padding-left:12px;
  /*Add whatever other styles you need */
}

編集：CSSを追加

編集:さて、私は以前に見逃したものを見ました-jQueryは、外部CSSをオーバーライドするインラインのパディングを設定しています。技術的!importantには.activeCSS で使用することもできますが、個人的にはこの方法の方が好きです。

基本的にはactive前と同じようにクラスを追加していきますが、あくまで参考程度に。ユーザーがリンクをクリックすると、activeクラスが追加されます。リンクにactiveクラスがある場合、マウスアウト時にアニメーション化されません。notactiveクラスがクリックactiveされると、他のすべてのナビゲーション リンクから削除され、それらはすべて開始点にアニメーション化され、新しいリンクが作成されactiveます。

これは、関連するコードでよりよく説明される場合があります。

// creates the hover-slide effect for all link elements         
$(link_elements).each(function(i) {
    $(this)
        .hover(
            function() {
                $(this).animate({ paddingLeft: pad_out }, 150);
            }, function() {
                if(!$(this).hasClass("active"))
                    $(this).animate({ paddingLeft: pad_in }, 150);
            })
        .click(
            function() {
                $(link_elements).not($(this)).removeClass("active").animate({ paddingLeft: pad_in}, 150);
                $(this).addClass("active");
            });
}); // End `each` loop

関連する jsFiddle: http://jsfiddle.net/eAaCn/ (テスト用console.log()にreturn falseのみ jsFiddle に追加)

于 2012-07-13T03:43:53.240 に答える