0

私はvBulletinをウェブサイト内のいくつかのページ（ホーム、ブログ、フォーラム、ギャラリー、チュートリアル、FAQ）に使用しており、現在はlavalamp（http://www.gmarwaha.com/blog/2007/08/23/lavalamp）を使用しています。 -for-jquery-lovers /）。

私は数週間、現在のページに応じて「現在の」クラスを動的に設定する方法を見つけようとして失敗しました。以下は、失敗した試行のいくつかの例です。コードが機能することを確認しました。正しいliに到達できますが、addClassまたはremoveClassが機能していません。メニューのIDをセレクターとして使用し、スクリプトをいくつかの異なる場所に配置して関数にし、lavalamp初期化コードを使用して関数を呼び出してみました...ご協力いただければ幸いです。

最初の試み：

<!--BEGIN LAVA MENU-->
    <ul class="lavaLamp" id="lavaMM">
        <li><a href="/">Home</a></li>
        <li><a href="/market/">Market</a></li>
        <li><a href="/content.php/475-the-daily-buzz">Blog</a></li>
        <li><a href="/forum/forum.php">Forum</a></li>
        <li><a href="/gallery/">Gallery</a></li>
        <li><a href="/forum/forumdisplay.php/439-Scrap-Orchard-University">Tutorials</a></li>
        <li><a href="/staff/">Staff</a></li>
        <li><a href="/forum/faq.php">FAQ</a></li>
        <li><a href="/market/support/">Support</a></li>
    </ul>
<!--END LAVA MENU-->


<script language="javascript" type="text/javascript">
$(document).ready(function(){
    $('#lavaMM').lavaLamp({
        fx: 'backout', 
        speed: 700,
        click: function(event, menuItem) {
            return true;
        }
    });
    var fullURL = document.URL;
    var splitURL = fullURL.split('/', 4);
    if (splitURL[3] == 'content.php') {
        $('ul.lavaLamp li:eq(2)').addClass('current');
    }
    else if (splitURL[3] == 'forum') {
            $('ul.lavaLamp li:eq(3)').addClass('current');
    } 
    else if (splitURL[3] == 'gallery') {
            $('ul.lavaLamp li:eq(4)').addClass('current');
    } 
});
</script>

2回目の試行：

<!--BEGIN LAVA MENU-->
    <ul class="lavaLamp" id="lavaMM">
        <li><a href="/">Home</a></li>
        <li><a href="/market/">Market</a></li>
        <li class="current"><a href="/content.php/475-the-daily-buzz">Blog</a></li>
        <li class="current"><a href="/forum/forum.php">Forum</a></li>
        <li class="current"><a href="/gallery/">Gallery</a></li>
        <li><a href="/forum/forumdisplay.php/439-Scrap-Orchard-University">Tutorials</a></li>
        <li><a href="/staff/">Staff</a></li>
        <li><a href="/forum/faq.php">FAQ</a></li>
        <li><a href="/market/support/">Support</a></li>
    </ul>
<!--END LAVA MENU-->

<script language="javascript" type="text/javascript">
$(document).ready(function(){
    $('#lavaMM').lavaLamp({
        fx: 'backout', 
        speed: 700,
        click: function(event, menuItem) {
            return true;
        }
    });
    var fullURL = document.URL;
    var splitURL = fullURL.split('/', 4);
    if (splitURL[3] == 'content.php') {
        $('ul.lavaLamp li:eq(3)').removeClass('current');
        $('ul.lavaLamp li:eq(4)').removeClass('current');
    }
    else if (splitURL[3] == 'forum') {
            $('ul.lavaLamp li:eq(2)').removeClass('current');
        $('ul.lavaLamp li:eq(4)').removeClass('current');
    } 
    else if (splitURL[3] == 'gallery') {
        $('ul.lavaLamp li:eq(2)').removeClass('current');
            $('ul.lavaLamp li:eq(3)').removeClass('current');
    } 
});
</script>

3回目の試行：

<!--BEGIN LAVA MENU-->
    <ul class="lavaLamp" id="lavaMM">
        <li><a href="/">Home</a></li>
        <li><a href="/market/">Market</a></li>
        <li><a href="/content.php/475-the-daily-buzz">Blog</a></li>
        <li><a href="/forum/forum.php">Forum</a></li>
        <li><a href="/gallery/">Gallery</a></li>
        <li><a href="/forum/forumdisplay.php/439-Scrap-Orchard-University">Tutorials</a></li>
        <li><a href="/staff/">Staff</a></li>
        <li><a href="/forum/faq.php">FAQ</a></li>
        <li><a href="/market/support/">Support</a></li>
    </ul>
<!--END LAVA MENU-->



<script language="javascript" type="text/javascript">
$(document).ready(function(){
    var fullURL = document.URL;
    var splitURL = fullURL.split('/', 4);
    if (splitURL[3] == 'content.php') {
        $('ul.lavaLamp li:eq(2)').each(function() {
                    $(this).addClass('current');
        });
    }
    else if (splitURL[3] == 'forum') {
            $('ul.lavaLamp li:eq(3)').each(function() {
                    $(this).addClass('current');
            });
    } 
    else if (splitURL[3] == 'gallery') {
            $('ul.lavaLamp li:eq(4)').each(function() {
                    $(this).addClass('current');
            });
    } 
});
</script>
4

1 に答える 1

0

ファイルlavalamp.js の を次のように置き換えますo。

o = $.extend({ fx: "linear", speed: 500, classes: 'current', click: function(){} }, o || {});
$current = o.classes;

関数を呼び出します。

 $(function() { $("#menu_main").lavaLamp({ fx: "backout", speed: 700 ,classes : 'current_page_item'})});
于 2012-05-30T20:06:07.770 に答える