请问下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 Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제









PHP에서 최종 키워드는 클래스가 상속되고 메소드가 덮어 쓰는 것을 방지하는 데 사용됩니다. 1) 클래스를 최종적으로 표시 할 때는 수업을 상속받을 수 없습니다. 2) 메소드를 최종으로 표시 할 때는 메소드를 서브 클래스로 다시 작성할 수 없습니다. 최종 키워드를 사용하면 코드의 안정성과 보안이 보장됩니다.

파일 업로드 기능은 Bootstrap을 통해 구현할 수 있습니다. 단계는 다음과 같습니다. 부트 스트랩 CSS 및 JavaScript 파일을 소개합니다. 파일 입력 필드를 만듭니다. 파일 업로드 버튼을 만듭니다. 파일 업로드를 처리합니다 (FormData를 사용하여 데이터를 수집 한 다음 서버로 전송); 사용자 정의 스타일 (선택 사항).

부트 스트랩을 사용하여 수직 센터링을 구현하여 : Flexbox Method : D-Flex, 정당화 컨텐츠 중심 및 정렬 중심 센터 클래스를 사용하여 Flexbox 컨테이너에 요소를 배치하십시오. Align-Items-Center 클래스 방법 : Flexbox를 지원하지 않는 브라우저의 경우 상위 요소의 높이가 정의 된 경우 Align-Items 중심 클래스를 사용하십시오.

부트 스트랩 버튼을 사용하는 방법? 부트 스트랩 CSS를 소개하여 버튼 요소를 만들고 부트 스트랩 버튼 클래스를 추가하여 버튼 텍스트를 추가하십시오.

부트 스트랩을 사용하여 웹 사이트를 레이아웃하려면 그리드 시스템을 사용하여 페이지를 컨테이너, 행 및 열로 나누어야합니다. 먼저 컨테이너를 추가 한 다음 행에 행을 추가하고 행 내 열을 추가 한 다음 마지막으로 열에 내용을 추가하십시오. 부트 스트랩의 반응 형 레이아웃 함수는 중단 점 (XS, SM, MD, LG, XL)에 따라 레이아웃을 자동으로 조정합니다. 응답 형 클래스를 사용하여 다른 화면 크기의 다른 레이아웃을 달성 할 수 있습니다.

부트 스트랩을 사용하여 회전 목마 차트를 작성하려면 다음 단계가 필요합니다. 회전 목마 클래스를 사용하여 회전식 차트가 포함 된 컨테이너를 만듭니다. 회전 목마 항목 클래스와 활성 클래스를 사용하여 컨테이너에 회전 목마 이미지를 추가하십시오 (첫 번째 이미지에 대해서만). Carousel-Control-Prev 및 Carousel-Control-Next 클래스를 사용하여 제어 버튼을 추가하십시오. 회전식 인디케이터 클래스 (선택 사항)를 사용하여 회전식 인디케이터 메트릭 (작은 점)을 추가하십시오. 자동 재생을 설정하고 회전식 컨테이너에 Data-BS-Ride = "Carousel &"를 추가하십시오.

부트 스트랩 테이블에 차량 코드를 표시하는 주된 이유는 문자 세트 불일치, 인코딩 문제 및 열악한 브라우저 호환입니다. 솔루션은 다음과 같습니다. 1. 문자 세트 일관성 확인; 2. 데이터 전송 인코딩을 확인하십시오. 3. 브라우저를 더 나은 호환성으로 교체하십시오. 4. 부트 스트랩 테이블 버전을 업데이트하십시오. 5. 데이터 형식이 올바른지 확인하십시오. 6. 브라우저 캐시를 지우십시오.
