根據用戶點擊切換可見div

Question

所以我有一個帶導航鏈接的div（使用ul / li和li中的href設置）。

下面我還有4個其他的div。 我只想一次顯示1個div，然后根據用戶對導航LI的選擇進行切換

我在不同的頁面上使用了類似的設置，並嘗試將其移植到我當前的頁面但無濟於事......

的jsfiddle

請參閱上面的jsfiddle，了解所涉及的HTML / CSS / JS。

HTML：

<div id="content">
        <div class="man-banner"></div>
        <div class="banner-nav" id="tabs">
            <ul class="tabs" style="padding-left: 0px">
                <li class="active"><a href="#wrapper#container#content#tab-content#home"><span>Home</span></a></li>
                <li><a href="#findvehicle" rel="find_your_vehicle"><span>Find Your Vehicle</span></a></li>
                <li><a href="#downloads" rel="downloads"><span>Downloads</span></a></li>
                <li><a href="#support" rel="support"><span>Support</span></a></li>
            </ul>
        </div>
        <div id="tab-content">
            <div id="home" class="tab_content">
            1234156124
            </div>
            <div id="findvehicle" class="tab_content">
            abasdjfniasjfnasdf
            </div>
            <div id="downloads" class="tab_content">
            asdfniadhnfiasdn890384834854854jnrjrjr
            </div>
            <div id="support" class="tab_content">
            asdfniadhTHIS IS SUPPORT
            </div>
        </div>
    </div>

歡迎任何幫助，我仍然在學習（不是我們總是），所以對於任何修復/提示，請詳細說明它的工作原理，或者我做錯了什么使得這不起作用。 （如果這是有道理的！）

再次感謝你的幫助！

Answer 1

這是實現它的一種方式。

HTML - 為您的錨元素添加了“navlink”類， 並為它們提供了一個數據部分屬性，該屬性引用了它們應顯示的選項卡 ：

    <div id="content">
        <div class="banner-nav" id="tabs">
            <ul class="tabs" style="padding-left: 0px">
                <li><a href="#home"><span>Home</span></a></li>
                <li><a href="#findvehicle" rel="find_your_vehicle"><span>Find Your Vehicle</span></a></li>
                <li><a href="#downloads" rel="downloads"><span>Downloads</span></a></li>
                <li><a data-section="support" href="#support" rel="support"><span>Support</span></a></li>
            </ul>
        </div>
        <div id="tab-content">
            <div id="home" class="tab_content">
            1234156124
            </div>
            <div id="findvehicle" class="tab_content">
            abasdjfniasjfnasdf
            </div>
            <div id="downloads" class="tab_content">
            asdfniadhnfiasdn890384834854854jnrjrjr
            </div>
            <div id="support" class="tab_content">
            asdfniadhTHIS IS SUPPORT
            </div>
        </div>
    </div>

JavaScript - 請參閱內聯評論：

$(document).ready(function(){
  // start of at the home page
  navigateTo("#home");

  // for every navlink element
  $('.tabs > li > a').each(function() {
    //when it is clicked
    $(this).click(function(e) {
      e.preventDefault();
      // navigate to the section ilinked to in the href
      navigateTo($(this).attr('href'));
    });
  });
});

function navigateTo(sectionId) {
  //hide all tabs
  $('.tab_content').hide();

  //then show the one we want
  $(sectionId).show();
}

Answer 2

每個菜單項不需要單獨的單擊處理程序。 #tabs li click處理程序就足夠了。 我刪除了每個鏈接上的點擊處理程序，因為它們不是必需的。

 $("#tabs li").click(function() { // First remove class "active" from currently active tab $("#tabs li").removeClass('active selected'); // Now add class "active" to the selected/clicked tab $(this).addClass("active selected"); // Hide all tab content $(".tab_content").hide(); // Here we get the href value of the selected tab var selected_tab = $(this).find("a").attr("href"); // Show the selected tab content $(selected_tab).fadeIn(0); // At the end, we add return false so that the click on the link is not executed return false; }); 

 ul { list-style: none; } .man-banner { background: url("../images/man-logo.png") no-repeat top; border-radius: 8px 8px 0 0; height: 93px; max-width: 915px; margin: 15px 15px 0 15px; } .banner-nav { background: #F0F1F2; border-bottom: 1px solid #D6D8DB; height: 40px; max-width: 915px; margin: 0 15px 15px; } .banner-nav a { font-family: MAN-light, Arial, sans-serif; font-size: 16px; margin-left: 20px; text-decoration: none; display: block; float: left; height: 40px; position: relative; color: #303C49; line-height: 40px; } .banner-nav a:hover { color: #303C49; } .banner-nav a:before { content: ""; position: absolute; width: 100%; height: 2px; bottom: 5; left: 0; background-color: #000; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .banner-nav a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } ul.tabs li.selected a, ul.tabs li.selected a:hover { top: 0px; font-weight: normal; background: #FFF; border-bottom: 1px solid #FFF; color: #000; } /***************************/ /** Main Content Area **/ /***************************/ #content { width: 950px; margin: 5 10; overflow: hidden; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="content"> <div class="man-banner"></div> <div class="banner-nav" id="tabs"> <ul class="tabs" style="padding-left: 0px"> <li class="active"><a data-tab-id="#home"><span>Home</span></a> </li> <li><a href="#findvehicle" rel="find_your_vehicle"><span>Find Your Vehicle</span></a> </li> <li><a href="#downloads" rel="downloads"><span>Downloads</span></a> </li> <li><a href="#support" rel="support"><span>Support</span></a> </li> </ul> </div> <div id="tab-content"> <div id="home" class="tab_content"> 1234156124 </div> <div id="findvehicle" class="tab_content"> abasdjfniasjfnasdf </div> <div id="downloads" class="tab_content"> asdfniadhnfiasdn890384834854854jnrjrjr </div> <div id="support" class="tab_content"> asdfniadhTHIS IS SUPPORT </div> </div> </div> 

Answer 3

當有onclick事件時，您可以嘗試使用css來顯示和隱藏塊。

這里有一些示例代碼：

CSS

.activetab {
    display: block;
}

.tab {
    display: none;
}

JAVASCRIPT / JQUERY

$(document).ready(function() {
    $(".tabmenu").on("click", function() {
        $(".activetab").removeClass("activetab");
        $(this).addClass("activetab");
    });
});

HTML

<div id="content">
    <div class="man-banner"></div>
    <div class="banner-nav" id="tabs">
        <ul class="tabs" style="padding-left: 0px">
            <li class="active tabmenu"><a href="#wrapper#container#content#tab-content#home"><span>Home</span></a></li>
            <li class="tabmenu"><a href="#findvehicle" rel="find_your_vehicle"><span>Find Your Vehicle</span></a></li>
            <li class="tabmenu"><a href="#downloads" rel="downloads"><span>Downloads</span></a></li>
            <li class="tabmenu"><a href="#support" rel="support"><span>Support</span></a></li>
        </ul>
    </div>
    <div id="tab-content">
        <div id="home" class="tab_content tab">
        1234156124
        </div>
        <div id="findvehicle" class="tab_content tab">
        abasdjfniasjfnasdf
        </div>
        <div id="downloads" class="tab_content tab">
        asdfniadhnfiasdn890384834854854jnrjrjr
        </div>
        <div id="support" class="tab_content tab">
        asdfniadhTHIS IS SUPPORT
        </div>
    </div>
</div>

如果你想我可以創建一個JSFiddle來看它是如何工作的

希望這對你有用！

Answer 4

您有語法錯誤，您正在多次關閉文檔就緒回調。

$("#findvehicle").click(function(){
        $('a[rel="find_your_vehicle"]').trigger("click");
    });
}); // Remove this

    $("#downloads").click(function(){
        $('a[rel="downloads"]').trigger("click");
    });
}); // Remove this

當您刪除這些額外的關閉時，會出現標簽。 您可能還希望隱藏該文檔就緒調用中的所有默認選項卡。