blocks|key|497180|text|在文档中，这些按钮只是手动禁用。它与.pagination样式无关。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|497181|你可以用它|497182|$('.pagination+.disabled+a,+.pagination+.active+a').on('click',+function(e)+{
++++e.preventDefault();
});|code-block|syntax|javascript|497183|注意:如果使用基于ajax的分页，则必须将这段代码放入更新处理程序或使用delegated+events|497184|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/on/#direct-and-delegated-events^0|I|B|0|0|0|10|G|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|D|@$9|12|A|13|1|14]]|E|$]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

In the docs, those buttons are just disabled manually. It has nothing to do with the <code>.pagination</code> styling.

You could use that

<pre class="lang-js prettyprint-override"><code>$('.pagination .disabled a, .pagination .active a').on('click', function(e) {
 e.preventDefault();
});
</code></pre>

Note: If you use an ajax based pagination you have to put this piece of code in the update handler or use <a href="http://api.jquery.com/on/#direct-and-delegated-events">delegated events</a> instead

blocks|key|280479|text|如果你在服务器端动态编写html+(例如，使用django+)，并且你不想使用javascript，你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|280480|pseudo+code:
if+(Model.HasNext())+{
+++<li>+//+normal+link
++++++<a+href="www.someurl.com/page=i">next</a>
+++</li>
}+else+{
+++<li+class="disabled">+//+disabled+link
++++++<a+href="javascript:+void(0)">next</a>
++</li>
}|code-block|syntax|javascript|280481|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you write the html dynamically server side (with django for example) and you don't want to use javascript you could do this:

<pre><code>pseudo code:
if (Model.HasNext()) {
 &lt;li&gt; // normal link
 &lt;a href="www.someurl.com/page=i"&gt;next&lt;/a&gt;
 &lt;/li&gt;
} else {
 &lt;li class="disabled"&gt; // disabled link
 &lt;a href="javascript: void(0)"&gt;next&lt;/a&gt;
 &lt;/li&gt;
}
</code></pre>

blocks|key|497302|text|对于PHPLD+v4.2，我使用了以下代码来显示Bootstrap+3分页|type|unstyled|depth|inlineStyleRanges|entityRanges|data|497303|{*+Display+Paging+Links+*}
<ul+class="pagination">
<li>{paginate_prev+id="MainPaging"}</li>
{paginate_middle+id="MainPaging"+format="page"+prefix=""+suffix=""+link_prefix="
<li>"link_suffix="</li>"+current_page_prefix="
<li+class=\"active\"><a+href=\"#\">"current_page_suffix="</a></li>"}
<li>{paginate_next+id="MainPaging"}</li>
</ul>|code-block|syntax|javascript|497304|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

For PHPLD v 4.2 I used the following code to show Bootstrap 3 pagination

<pre><code>{* Display Paging Links *}
&lt;ul class="pagination"&gt;
&lt;li&gt;{paginate_prev id="MainPaging"}&lt;/li&gt;
{paginate_middle id="MainPaging" format="page" prefix="" suffix="" link_prefix="
&lt;li&gt;"link_suffix="&lt;/li&gt;" current_page_prefix="
&lt;li class=\"active\"&gt;&lt;a href=\"#\"&gt;"current_page_suffix="&lt;/a&gt;&lt;/li&gt;"}
&lt;li&gt;{paginate_next id="MainPaging"}&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

blocks|key|497348|text|作为参考，下面是what+Bootstrap+does|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|497349|&.disabled,
&[disabled]+{
++cursor:+not-allowed;
++pointer-events:+none;+//+Future-proof+disabling+of+clicks
++.opacity(.65);
++.box-shadow(none);
}|code-block|syntax|javascript|497350|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/twbs/bootstrap/blob/df7cfe86525252034cf85a365d09a4c2485116b4/less/buttons.less#L43-L51^0|8|J|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

As a reference, here is <a href="https://github.com/twbs/bootstrap/blob/df7cfe86525252034cf85a365d09a4c2485116b4/less/buttons.less#L43-L51" rel="noreferrer">what Bootstrap does</a>:

<pre><code>&amp;.disabled,
&amp;[disabled] {
 cursor: not-allowed;
 pointer-events: none; // Future-proof disabling of clicks
 .opacity(.65);
 .box-shadow(none);
}
</code></pre>

blocks|key|497369|text|$('.disabled+a').click(function(){
++++return+false;
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|497370|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>$('.disabled a').click(function(){
 return false;
});
</code></pre>

I'm trying to use Bootstrap's Pagination style. The documentation says to create the page list like so:

<pre><code>&lt;div class="pagination"&gt;
 &lt;ul&gt;
 &lt;li class="disabled"&gt;&lt;a href="#"&gt;&amp;laquo;&lt;/a&gt;&lt;/li&gt;
 &lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#"&gt;&amp;raquo;&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

The first two links, the left arrow and the 1, should be disabled. When I incorporate it into my django template though, those two are still usable. Clicking them sends the user to the top of the page just like any other anchor link with an id "#". I think I still have to have the there in order for Bootstrap to style it correctly.

Is there a way to write this so that when the user clicks one of the disabled "buttons" it doesn't do anything?

Disabled link in Bootstrap Pagination

服务器

我正在尝试使用Bootstrap的分页风格。文档要求创建页面列表，如下所示：<div class="pagination"> <ul> <li class="disabled"><a href="#">&laquo;</a></li> <li class="active"><a hre...

问Bootstrap分页中禁用的链接
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap分页中禁用的链接EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap分页中禁用的链接
EN