请问下segmentfault中user settings页面右边的li在点击刷新后是怎么记住的?
如图所示,我点击了工作教育经历后,页面刷新了,此时激活的项目变成了工作教育经历了,请问这是怎么实现的?
是后台传给前台哪个li被激活了?还是采用其他的实现方法?
回复内容:
如图所示,我点击了工作教育经历后,页面刷新了,此时激活的项目变成了工作教育经历了,请问这是怎么实现的?
是后台传给前台哪个li被激活了?还是采用其他的实现方法?
根据 URL 传入参数 $tab
判断当前页
<li<?php if ('aaa' == $tab): ?> class="current"<?php endif; ?>>xxx</li> <li<?php if ('bbb' == $tab): ?> class="current"<?php endif; ?>>xxx</li>
首先,感谢你邀请我回答。然后你所谓的激活,其实就是给li
赋上了一个class="current"
属性而已,至于如何判断,这个就更简单了。
SegmentFault 这个应该是在后端判断的,这个 WordPress 等程序的主题里头就有写,想法应该是跟你那个一样,每个都判断一下是否为当前页,是则加,不是则不加。
不过最近写静态博客的主题,发现他们有这么一个思路。程序有一个extends
和block
函数,可以定义父模板和复写项,比如我在base.html
中这样定义了
<code><li{% block index %}{% endblock %}>你好我是首页</li> <li{% block user %}{% endblock %}>你好我是用户页</li> <li{% blcok article %}{% endblock %}>你好我是文章页</li> </code>
然后我在用户页中这么写
<code>{% extends 'base.html' %} {# 表示把base.html继承了过来 #} {% block user %} class="current"{% endblock %} {#表示给上面定义的一个可以复写项赋值#} </code>
那么最终我的用户页就会呈现这样的效果
<code><li>你好我是首页</li> <li class="current">你好我是用户页</li> <li>你好我是文章页</li> </code>
这样也能达到目的。当然你也可以选择在前端判断,给每个li
增加一个对应的class
,最好和URL
的调用名称一致,然后根据URL
的值直接赋值给对应的对象就成了。
总的来说就是,如果你不想给<li>
增加单独的标识的话,就只能后台/前端一个一个判断咯,如果增加了单独标识的话就可以快速一点,后端/前端都不局限就是。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









ブートストラップを使用して垂直センタリングを実装します。FlexBoxメソッド:D-Flex、Justify-Content-Center、Align-Items-Centerクラスを使用して、FlexBoxコンテナに要素を配置します。 ALIGN-ITEMS-CENTERクラス方法:FlexBoxをサポートしていないブラウザの場合、親要素の高さが定義されている場合、Align-Items-Centerクラスを使用します。

ブートストラップボタンの使用方法は?ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

ブートストラップを使用して検索バーの値を取得する方法:検索バーのIDまたは名前を決定します。 JavaScriptを使用してDOM要素を取得します。要素の値を取得します。必要なアクションを実行します。

回答:ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順:ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします(オプション)。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
