/ /そのdivの外のli要素によってdivを参照する方法 - jquery、html、refer

そのdiv-jquery、html、refer以外のli要素によるdivの参照方法

私が知っていることを認めなければならないプログラミングについては非常に基本的です。私はすべてのことを理解していないので、私の質問は少し変わって見えるかもしれませんが、まだ私の考えがなくなり、私は尋ねる必要があります。

私はSlide Elementsチュートリアルを使っていくつか追加しましたDivを私のウェブサイドにスライドすると、すべてうまくいきますが、このチュートリアルの著者は、親div内のボタン要素とクリック内側のdivスライドを使用しました。私はそのdivの外にある私のナビゲーションセクションからli要素を使用したいが、私はそのdivにアニメーションを維持するスクリプトコードを変更する方法を知らない。 基本的にそれは見える:

HTML:

    <ul id="navigation">
<li class="about"><a title="A" href="#" > </a></li>
<li class="search"><a title="P" href="#" ></a></li>
<li class="photos"><a title="G" href="#" ></a></li>
<li class="rssfeed"><a title="U" href="#" ></a></li>
<li class="contact"><a title="K" href="#" ></a></li>
</ul>

<div id="IDcontent" class="slide" >
<button>slide it</button>
<div class="inner"  style="margin-left: 100%"> test </div>
</div>

私はli要素がボタンではなくクリックアクションをトリガーするスクリプトコードを変更することができますが、クリック後はdivをスライドせずに次のli要素をスライドさせます。

スクリプトコード:

<script>

$(document).ready(function() {
$("#navigation li").click(function() {
var $marginLefty = $(this).next();
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css("marginLeft"),10) == 0 ?
$marginLefty.outerWidth() :
0
});
});
});

</script>

すべての訴訟?

本当にありがとう!

回答:

回答№1は0

このコード行のために、

var $marginLefty = $(this).next();

クリックされた後の次のli要素はあとで$ marginLefty.animate()を実行するとアニメーション化されます。 divをアニメートする場合は、marginLeftyをdiv要素に設定する必要があります。その行を次のように置き換えます。

var $marginLefty = $(".inner");

どの李がクリックされたかを知るには、あなたができる

// $(this) refers to the element that was clicked
$liClass = $(this).attr("class")

クリックハンドラの内部次に、liがクリックされたdivベースの内容を変更し、html()関数を使用して変更することができます。例えば、

var content;
if($liClass == "about"){
content = "about clicked";
}
else if($liClass == "search"){
content = "search clicked";
}
//more code here
//more code here
$marginLefty.html(content);

.attr()と.html()の詳細については、こちらをご覧ください: http://api.jquery.com/attr/ そして http://api.jquery.com/html/


回答№2の場合は0

これを試してみてください:

   $(document).ready(function() {
$("#navigation li").click(function() {
var $marginLefty = $("a", this);
$marginLefty.animate({
marginLeft: parseInt($marginLefty.css("marginLeft"),10) == 0 ?
$marginLefty.outerWidth() :
0
});
});
});

回答№3の場合は0

これを正しく理解していれば、ボタン要素がやっているのと同じことをLI要素にしたいのですか?ボタンをクリックするだけでいいです:

$(document).ready(function() {
$("#navigation li").click(function() {
$("#IDcontent").find("button").trigger("click");
});
});

ボタンの要素はページ。これは、基本的に、ボタンのクリックイベントに付随するコードを実行します.LI要素のどれかをクリックするたびに実行されます。セレクタを変更することによって、1つのリスト要素のみで機能するように設定できます。

  $("#navigation li.about").click(function() {
...
});

これは、この機能をli class = "about"要素にのみ付加します。

これは、あなたがボタンをクリックします。あなたは単にCSSのボタンを隠すことができますが、それはちょっとしたものです。ボタンを完全に削除する場合は、そのボタンが使用しているJavaScriptのコードを探してください。

$("#IDcontent button").click(function(){ ... });

または同様のもの。次に、ボタンのclickイベント内のコードを、リスト要素のclickイベントに移動します。