Question

我的网页有问题，我的主要问题是Bootstrap和JQuery一起工作。

$("ul.pagination li:not(.active) a").on("click",function(){
	$(".pagination li.active").removeClass("active");
	$(this).parent().addClass("active");
	$(".page").hide();
	$("#"+$(this).text().toLowerCase()+"Page").show(); });

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul class='pagination'>
  <li class='active'>
    <a href='#'>Home</a>
  </li>
  <li>
    <a href='#'>Outside</a>
  </li>
  <li>
    <a href='#'>Fort</a>
  </li>
  <li>
    <a href='#'>Settings</a>
  </li>
</ul>

如您所见，它运作正常。直到您尝试移回最初处于活动状态的页面。我也有用于在剪辑中切换页面的代码，是否有人对此进行修复？

Answer 1

将原始选择器更改为

$("ul.pagination li a").on("click",function(){

否则，您没有绑定点击事件。

$("ul.pagination li a").on("click",function(){
	$(".pagination li.active").removeClass("active");
	$(this).parent().addClass("active");
	$(".page").hide();
	$("#"+$(this).text().toLowerCase()+"Page").show(); });

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul class='pagination'>
  <li class='active'>
    <a href='#'>Home</a>
  </li>
  <li>
    <a href='#'>Outside</a>
  </li>
  <li>
    <a href='#'>Fort</a>
  </li>
  <li>
    <a href='#'>Settings</a>
  </li>
</ul>

Answer 2

那是因为您仅为非活动元素（不包括第一个活动元素）附加onclick事件。您必须使所有元素都可单击，并检查所处理的处理器中所单击的元素是否处于活动状态：

// Add a handler to all elements
$("ul.pagination li a").on("click",function(){
   var clicked = $(this);
   if(!clicked.parent().hasClass("active")) {
      // Do what you want
   }
});

分页可以选择原始

2 个答案: