Javascript 如何使用引导创建多个隐藏div_Javascript_Twitter Bootstrap

Javascript 如何使用引导创建多个隐藏div

javascript twitter-bootstrap

Javascript 如何使用引导创建多个隐藏div,javascript,twitter-bootstrap,Javascript,Twitter Bootstrap,我正在用bootstrap创建一个搜索引擎。我希望有多个结果页面，每个页面都有自己的div，只显示活动的div。我有一个非响应版本的代码在没有引导的情况下运行我定义这种风格： .hiddenDiv { display: none; } .visibleDiv { display: block; border: none; } 我有这个代码来管理div的显示/隐藏 var lastDiv = ""; function showDiv(divName) { // hide

我正在用bootstrap创建一个搜索引擎。我希望有多个结果页面，每个页面都有自己的

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

函数和对它的调用，以处理是否启用引导列表项中的页面链接。我想知道在bootstrap中是否有更好的方法来管理div的显示/隐藏。

bootstrap实际上使用jquery，它的大部分功能都依赖jquery

您可以使用jquery的show/hide方法，而不是构建一个类来显示div

例如：

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

/*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");

})

或者更进一步，您可以使用jquery.load在div中动态加载页面

例如：

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

/*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");

})

您可以为所有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>

或者通过使用您使用的CSS实现，它将如下所示

<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>

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

$(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
});

我们在上面所做的是通过使用单击元素的数据id进行跟踪来显示目标div。它是对应元素id的一部分

使用this的问题在于，当您尝试将id属性用于此类操作时，jquery的某些版本会抛出错误。所以我认为首选的选项是使用dataid属性，因为它不会返回错误。所以

$(".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
});

总而言之我真的不明白你为什么要将所有结果都放在一页中。这将增加加载时间，你知道
我认为在php等后端语言上投入时间是值得的
p.s.我见过引导显示/隐藏一个div的示例，例如，基于设备显示一个或另一个头，但不是管理多个div的示例。好主意。考虑jquery而不是js。谢谢