如何使用引導程序擁有多個隱藏的 div

Question

我正在創建一個帶有引導程序的搜索引擎。 我想要多頁結果，每頁都有自己的div ，只顯示活動的div 。 我有一個沒有引導程序運行的代碼的無響應版本。

我定義了這種風格：

.hiddenDiv {
  display: none;
}
.visibleDiv {
  display: block;
  border: none;
}

我有這個代碼來管理 div 的顯示/隱藏。

var lastDiv = "";    
function showDiv(divName) {
  // hide last div 
    document.getElementById(lastDiv).className = "hiddenDiv";
}

//if value of the box is not nothing and an object with that name exists, then change the class 
if (divName && document.getElementById(divName)) {
  document.getElementById(divName).className = "visibleDiv";
  lastDiv = divName;   
}

加載頁面正文時，我會在第一頁結果中顯示 div。

<body onload="showDiv('page_1')">

而且，當用戶單擊頁面鏈接時，我會觸發 js 代碼。

<a onClick='return showDiv("page_2");' href="#">2</a>

這一切正常。 我想知道引導程序的方式是什么？

我看到引導程序提供了一個分頁類。 因此，我可以修改showDiv函數並調用它來處理啟用或不啟用引導程序列表項中的頁面鏈接。 我想知道引導程序中是否有更好的方法來管理 div 的顯示/隱藏。

Answer 1

Bootstrap 實際上使用 jquery，它的大部分功能都依賴於它。

您可以使用 jquery 的 show/hide 方法，而不是構建一個類來顯示您的 div。

例如：

$('element,class, or ID').click(function(){
$('#page2').show();
})

或者更先進，您可以使用 jquery.load 在 div 中動態加載頁面

例如：

/*I would recommend wrapping your pagination in a class for accurate targeting */

$('.pagination a').click(function(){
var page = $(this).val() /*assuming your inner html is a number */
$('div').load("index" + page + ".html");

})

Answer 2

你可以為你所有的 div 分配一個類，比如表單示例<div class="result-div"></div>這樣你的不同 div 就會看起來像這樣。

<div class="result-div" id="result-1" data-id="1"></div>
<div class="result-div" id="result-2" data-id="2"></div>
<div class="result-div" id="result-n" data-id="3"></div>

那么無論你把導航放在哪里，它可能看起來像這樣

<a href="#1" data-show="1" class="results-nav">1</a>
<a href="#2" data-show="2" class="results-nav">2</a>
<a href="#n" data-show="n" class="results-nav">n</a>

我決定在 jquery 中同時使用id和data-id是有原因的，您可以在頁面完成加載之前隱藏 div，如下所示

$(function(){
    $('.result-div').hide();//hide all the results
    $('.result-div[data-id="1"]').show();//show the first one
});

或者通過使用您使用的 CSS 來實現，它看起來像這樣

$(function(){
    $('.result-div').addClass('hiddenDiv');
    $('.result-div[data-id="1"]').removeClass('hiddenDiv');//show the first one
});

要顯示第一個 div，您也可以使用 id，因為它是唯一的

$('#result-1').show();//show the first one

然后一旦用戶單擊導航項，您就可以顯示所需的並隱藏其余的。 這就是某些 Jquery 版本出現 id 問題的地方。 所以我們處理點擊事件並這樣做

$(".results-nav").click(function(){
    $('.result-div').addClass('hiddenDiv');//hide all
    $('#result-'+$(this).attr("data-id")).removeClass('hiddenDiv');//show the first one
});

我們在上面所做的是通過使用點擊元素的 data-id 進行跟蹤來顯示目標 div。 這是相應元素的 id 的一部分。

使用 this 的問題是當您嘗試使用 id 屬性進行此類操作時，某些版本的 jquery 會引發錯誤。 所以我認為首選的選項是使用 data-id 屬性，因為它不會返回錯誤。 所以

$(".results-nav").click(function(){
    $('.result-div').addClass('hiddenDiv');//hide all
    $('.result-div[data-id="'+$(this).attr("data-id")+'"]').removeClass('hiddenDiv');//show the first one
});

當然，您可以將.removeClass('hiddenDiv')替換為.show('')並將addClass('hiddenDiv')替換為hide('');

另外，請注意，使用我上面提到的以下代碼可能會導致所有 div 在隱藏之前顯示幾毫秒。

$(function(){
    $('.result-div').addClass('hiddenDiv');
    $('.result-div[data-id="1"]').removeClass('hiddenDiv');//show the first one
});

因此，默認情況下，您可以在 HTML 中使用 hiddenDiv，然后僅在頁面加載時刪除第一個

$(document).ready(function(){
    $('.result-div').addClass('hiddenDiv');
    $('.result-div[data-id="1"]').removeClass('hiddenDiv');//show the first one
});

結束語老實說，我不明白為什么要將所有結果 div 放在一頁中。 它會增加你知道的加載時間。

我認為在像 php 這樣的后端語言上投入時間是值得的

如何使用引導程序擁有多個隱藏的 div

問題描述

2 個解決方案

解決方案1
1 已采納 2015-05-21 18:17:04

解決方案2
0 2019-08-13 18:03:03

如何使用引導程序擁有多個隱藏的 div

問題描述

2 個解決方案

解決方案1 1 已采納 2015-05-21 18:17:04

解決方案2 0 2019-08-13 18:03:03

解決方案1
1 已采納 2015-05-21 18:17:04

解決方案2
0 2019-08-13 18:03:03