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>

一切正常。我想知道引导方式是做什么的？

我看到bootstrap提供了一个分页类。因此，我可以修改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>

我决定同时使用id和data-id是有原因的使用jquery，您可以在页面完成加载之前隐藏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问题的地方。因此，我们可以处理click事件并做到

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

我们在上面所做的是通过使用clicked元素的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等后端语言上投入时间是值得的

如何使用bootstrap

2 个答案: