使用Jquery根據菜單項點擊切換課程

好吧，即時通訊工作在這個網站上，其中Id喜歡根據點擊菜單項將div的內容更改爲內容。我沒有針對不同菜單項的頁面，但我在索引頁面中使用了div中的所有不同內容。我想加入JQuery，但我似乎無法找到一種方法將菜單項類或id鏈接到相應的div元素。我下面的「代碼：使用Jquery根據菜單項點擊切換課程

<html> 
<body> 
    <div class="navbar grid_12"> 
       <ul> 
        <li class="btn" id="home"><a href="#">Home</a></li> 
        <li class="btn" id="about"><a href="#">About Me</a></li> 
        <li class="btn" id="gallery"><a href="#">Gallery</a></li> 
        <li class="btn" id="resume"><a href="#">Resume</a></li> 
        <li class="btn" id="contact"><a href="#">Contact Me</a></li> 
       </ul> 
    </div> 
    <div class="content-container"> 
     <div class="bio content"> 
     About me content 
     </div> 
    <div class="contact content"> 
     Contact me content 
    </div> 
    <div class="gallery content"> 
     gallery content 
    </div> 
    </div> 
</body> 
</html>

等。

作爲我的JQuery編碼到目前爲止，這是我在哪裏的嘗試不同的東西出來

 //Update Content-Container Div 
$(document).ready(function(){ 
    var $main = $(".content-container"); 
    var $section = $(".content"); 

    $("#about").click(function(){ 
     $main.empty(); 
     $main.find(".bio"); 
     $(".bio").show();   
    }); 

});

來源

2013-12-17 mrfevrier

而不是寫入單個處理器小時後對於每個菜單項，使用data-*屬性來指代需要顯示的特定內容，然後在點擊處理程序中使用該屬性來決定要顯示哪個內容

<div class="navbar grid_12"> 
    <ul> 
     <li class="btn" id="home"><a href="#">Home</a></li> 
     <li class="btn" id="about" data-target=".bio"><a href="#">About Me</a></li> 
     <li class="btn" id="gallery" data-target=".gallery"><a href="#">Gallery</a></li> 
     <li class="btn" id="resume"><a href="#">Resume</a></li> 
     <li class="btn" id="contact" data-target=".contact"><a href="#">Contact Me</a></li> 
    </ul> 
</div> 
<div class="content-container"> 
    <div class="bio content"> 
     About me content 
    </div> 
    <div class="contact content"> 
     Contact me content 
    </div> 
    <div class="gallery content"> 
     gallery content 
    </div> 
</div>

然後

$(document).ready(function() { 
    var $main = $(".content-container"); 
    var $section = $(".content").hide(); 

    $(".navbar li.btn").click(function (e) { 
     e.preventDefault(); 
     $section.hide(); 
     var target = $(this).data('target'); 
     if(target){ 
      $section.filter(target).show(); 
     } 
    }); 

});

演示：Fiddle

來源

2013-12-17 05:17:48

這立即工作！謝謝你們，我想我需要更多地使用JQuery，因爲我覺得我知道邏輯，但是找到代碼並不那麼簡單。實踐練習！ – mrfevrier

嘗試：

假設id s的相關類相關聯。

HTML：

<li class="btn" id="bio"><a href="#">About Me</a></li>

JS：

$(".btn").click(function() { 
    $(".content-container .content").hide(); 
    $(".content-container").find("."+$(this).attr("id")).show();  
});

DEMO here.

來源

2013-12-17 05:20:53 Hiral

退房jquery tabs，我認爲你需要這個。

<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>jQuery UI Tabs - Default functionality</title> 
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
     <link rel="stylesheet" href="/resources/demos/style.css"> 
     <script> 
     $(function() { 
     $("#tabs").tabs(); 
     }); 
     </script> 
    </head> 
    <body> 
    <div id="tabs"> 
     <ul> 
     <li><a href="#tabs-1">Home</a></li> 
     <li><a href="#tabs-2">About Me</a></li> 
     <li><a href="#tabs-3">Gallery</a></li> 
     <li><a href="#tabs-4">Resume</a></li> 
     <li><a href="#tabs-5">Contact Me</a></li> 
     </ul> 
     <div id="tabs-1"> 
     <p>Home content</p> 
     </div> 
     <div id="tabs-2"> 
     <p>About me content</p> 
     </div> 
     <div id="tabs-3"> 
     <p>Gallery content </p> 
     </div> 
     <div id="tabs-4"> 
     <p>Resume content </p> 
     </div> 
     <div id="tabs-5"> 
     <p>Contact Me content </p> 
     </div> 
    </div> 
    </body> 
</html>

來源

2013-12-17 05:25:47

const containers = Array.from(document.querySelectorAll('.content')); 
// Slicing for link as it's not related to changing the slide content, 
// so we don't want to bind behaviour to it. 
const links = Array.from(document.querySelectorAll('.navbar ul .btn a')).slice(1); 

$(function() { 
    hideEls(containers); 
}); 

function hideEls (els) { 
    if (Array.isArray(els)) { 
    els.forEach(el => { 
     el.style.display = 'none'; 
    }); 
    } 
    return; 
} 

function showEl (els, i, e) { 
    e.preventDefault(); 
    hideEls(els); 
    els[i].style.display = 'block'; 
} 

links.forEach((link, i) => { 
    link.addEventListener('click', showEl.bind(null, containers, i)); 
});

這裏有一個fiddle

來源

2013-12-17 05:50:54 monners

我在考慮使用您的代碼，因爲您使用的是項目索引，但是當我在小提琴中運行代碼時，首先發生的事情是隱藏的內容閃爍，第二件事是鏈接沒有針對正確的內容顯示...即：_Resume_鏈接顯示_Gallery content_，_Gallery_顯示_contact我的內容_... – Chris22

@ Chris22哇，爆炸過去。你是對的！我已經更新了我的答案（從3年前開始），不再使用jQuery，並且實際工作（仍然使用索引）。也更新了小提琴。希望這可以幫助。 – monners

感謝您回覆並更新您的代碼 - 看起來棒極了！鏈接沒有針對正確的內容仍然存在問題。 _Resume_鏈接顯示_gallery_，_Contact me_ show _Resume_和_Gallery_顯示_Contact me _... – Chris22

在這裏，我開始隱藏的一切，然後根據什麼鏈接點擊，頁面顯示正確的內容。請注意，您的關於頁面的ID屬性錯誤，因此無法使用，但您的聯繫人和圖片庫頁面可以正常工作。這大概是twitter bootstrap框架的工作原理，我建議你看一下。

var $main = $(".content-container"); 
var $section = $(".content"); 
$section.hide(); 

$("li.btn").on('click', function() { 
    var link_id = $(this).attr('id'); 
    var content = $main.find("." + link_id); 
    $section.hide(); 
    content.show(); 
})

Working Example

來源

2013-12-17 05:58:27

使用Jquery根據菜單項點擊切換課程

回答

相關問題