突出显示<a> when the screen load/reload

时间：2017-01-31 13:52:37

标签： javascript jquery html css

I have this website: http://urbanphenomena.net/shukri/#page3

架构下的A01-FAF-01＆gt; FAF是一个链接，我希望在页面加载/重新加载时突出显示。

就像对输入的影响

<input type="checkbox" checked/>

＆＃34;已检查＆＃34;属性使复选框默认选中。我希望这与A01-FAF-01链接相同，但突出显示....当用户点击另一个链接时......突出显示消失。

代码：

＆＃13;
＆＃13; 
/* Fonts */

@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
@import url(https://fonts.googleapis.com/css?family=Droid+Sans:400,700);

/******************************* CSS Reset ************************************/

html, body, div, applet, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label,
legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  vertical-align: baseline;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

body {
  line-height: 1;
  color: black;
  background: white;
}

ol, ul {
  list-style: none;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: separate;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
}

blockquote, q {
  quotes: "" "";
}

/******************************************************************************/

nav {
  text-align: left;
  background-blend-mode: saturation;
}

/* li & a customization */
a[title] {
  color: #e4002b;
  font-size: 13px;
}


a:hover {
  color: white;
  text-decoration: none;
  background-color: #e4002b !important;
}

/* ul menu */
.nav> li {
  font-family: 'Droid Sans';
  position: relative;
  display: block;
}

.nav> li> a {
  position: relative;
  display: block;
  padding: 2px 2px;
}


/* Website title */
.navbar-fixed-top, .navbar-fixed-top> div, section> div {
  height: 0;
}

.navbar h5, .navbar h6 {
  color: #b1b1b0;
  font-family: 'Droid Sans';
  padding-bottom: 6.5px;
}

#droid h5, #droid h6 {
  font-family: 'Droid Arabic Kufi'
}

.navbar h5 {
  font-size: 13px;
}

.navbar h6 {
  font-size: 10px;
}

.gutter-20.row {
  margin-right: -10px;
  margin-left: -10px;
}

.gutter-20> [class^="col-"], .gutter-10> [class^=" col-"] {
  padding-right: 10px;
  padding-left: 10px;
}

/* Sliders & Pages Costumization */
.home-section img {
  width: 100%;
  height: 100%;
}

/* circle customization */
.circle {
  width: 200px;
  height: 200px;
  background: black;
  -moz-border-radius: 90%;
  -webkit-border-radius: 90%;
  border-radius: 90%;
  position: absolute;
  top: 80%;
  left: -50px;
}

/* Text inside the circle */
.text {
  color: red;
  position: absolute;
  left: 25%;
  top: 20%;
}

.big, .sub-big {
  color: #F5C52C;
  font-family: 'Droid Sans';
}

.top-text, .saudi {
  font-family: 'Droid Sans';
  color: white;
}

.top-text {
  position: absolute;
  font-size: 11px;
  left: -7px;
}

.big {
  font-size: 35px;
  position: absolute;
  left: -20px;
  top: 30px;
}

.sub-big {
  font-size: 14px;
  font-weight: normal;
  position: relative;
  top: 70px;
  left: -20px;
}

.saudi {
  position: absolute;
  font-size: 13px;
  top: 115px;
  left: 29px;
}

/* About Page */
#section2 {
  color: #b1b1b0;
  background-image: url(../imgs/about-background.jpg);
  background-size: cover;
}

#section2.background--dark {
  color: red;
}

/* Black Overlay */
.overlay {
  background-color: white;
  opacity: 0.8;
  position: absolute;
  height: 100%;
  width: 65%;
  left: 35%;
  background: -webkit-linear-gradient(right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

#section2 p, #section2 h3, #section2 h5 {
  text-align: right;
}

/* Projects Page */
#section4 {
  background-image: url(../imgs/projects-background.png);
  background-repeat: no-repeat;
  background-size: cover;
}

#section4 h3 {
  color: #cccccc;
}

.img-container {
  position: relative;
  padding-bottom: 75%;
  height: 0;
  overflow: hidden;
}

.img-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 97%;
  height: 40%;
}

.panel {
  background-color: transparent;
  text-align: right;
}

.panel-group h4 a {
  font-size: 15px;
}

.panel-group a {
  color: #b1b1b0;
  font-size: 11px;
}


.panel-group a:hover {
  color: white;
  cursor: pointer;
}

.panel-group h4:hover {
  color: white;
}

/* contact Page */
.contact-section span {
  color: #e4002b;
}

.contact-section a {
  color: black;
}

.contact-section a:Hover {
  color: white;
}

.map-container {
  position: relative;
  padding-bottom: 50%;
  height: 0;
  overflow: hidden;
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 95%;
}

ol button:focus {
    background-color: #b1b1b0;
    color: #e4002b;
}

ol button {
    background-color: transparent;
    font-size: 12px;
    padding: 0;
    border: 0;
    color: #b1b1b0;
}

/* Other */
.home-section, .about-section, .projects-section, .contact-section {
  padding-top: 95px;
  font-family: 'Droid Sans';
}
＆＃13; 
 <!--- Projects Section --->
    <div class="section projects-section container-fluid" id="section4">
      <div class="row">
        <div class="col-lg-2 pull-left">
          <div class="panel-group" id="accordion">
            <div class="panel">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Architecture</a>
              </h4>
              <div id="collapse1" class="panel-collapse collapse in">
                <div class="panel-body">
                  <!--- FAF --->
                  <div>
                    <a class="collapsed" data-toggle="collapse" href="#collapseOne">
                      <h5>FAF</h5>
                    </a>
                  </div>
                  <div id="collapseOne" class="panel-collapse collapse in">
                    <ol>
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/1.html')">A01-FAF-1</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/2.html')">A01-FAF-2</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/3.html')">A01-FAF-3</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/4.html')">A01-FAF-4</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A01-FAF/5.html')">A01-FAF-5</button><br>
                    </ol>
                  </div>
                  <!--- KSAF --->
                  <div>
                    <a class="collapsed" data-toggle="collapse" href="#collapseTwo">
                      <h5>KSAF</h5>
                    </a>
                  </div>
                  <div id="collapseTwo" class="collapse">
                    <ol>
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A02-KSAF/1.html')">A02-KSAF-1</button><br>
                    
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A02-KSAF/2.html')">A02-KSAF-2</button><br>
                    </ol>
                  </div>
                  <!--- KSAF10V --->
                  <div>
                    <a class="collapsed" data-toggle="collapse" href="#collapseThree">
                      <h5>KSAF10V</h5>
                    </a>
                  </div>
                  <div id="collapseThree" class="collapse">
                    <ol>
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/1.html')">A03-KSAF10V-1</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/2.html')">A03-KSAF10V-2</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/3.html')">A03-KSAF10V-3</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A03-KSAF10V/4.html')">A03-KSAF10V-4</button><br>
                    </ol>
                  </div>
                  <!--- Makkah --->
                  <div>
                    <a class="collapsed" data-toggle="collapse" href="#collapseFour">
                      <h5>Makkah</h5>
                    </a>
                  </div>
                  <div id="collapseFour" class="collapse">
                    <ol>
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A04-Makkah/1.html')">A03-Makkah-1</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A04-Makkah/2.html')">A03-Makkah-2</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A04-Makkah/3.html')">A03-Makkah-3</button><br>
                    </ol>
                  </div>
                  <!--- Marina --->
                  <div>
                    <a class="collapsed" data-toggle="collapse" href="#collapseFive">
                      <h5>Marina</h5>
                    </a>
                  </div>
                  <div id="collapseFive" class="collapse">
                    <ol>
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A05-Marina/1.html')">A05-Marina-1</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A05-Marina/2.html')">A05-Marina-2</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A05-Marina/3.html')">A05-Marina-3</button><br>
                    </ol>
                  </div>
                  <!--- Residential --->
                  <div>
                    <a class="collapsed" data-toggle="collapse" href="#collapseSix">
                      <h5>Residential</h5>
                    </a>
                  </div>
                  <div id="collapseSix" class="collapse">
                    <ol>
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/1.html')">A06-Residential-1</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/2.html')">A06-Residential-2</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/3.html')">A06-Residential-3</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/4.html')">A06-Residential-4</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/5.html')">A06-Residential-5</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/6.html')">A06-Residential-6</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/7.html')">A06-Residential-7</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/8.html')">A06-Residential-8</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/9.html')">A06-Residential-9</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A06-Residential/10.html')">A06-Residential-10</button><br>
                    </ol>
                  </div>
                  <!--- SAB4 --->
                  <div>
                    <a class="collapsed" data-toggle="collapse" href="#collapseSeven">
                      <h5>SAB4</h5>
                    </a>
                  </div>
                  <div id="collapseSeven" class="collapse">
                    <ol>
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/1.html')">A07-SAB4-1</button><br>
                      
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/2.html')">A07-SAB4-2</button><br>
                      
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/3.html')">A07-SAB4-3</button><br>
                      
                      <button type="button" onclick="setURL('imgs/projects/ARCH/A07-SAB4/4.html')">A07-SAB4-4</button><br>
                    </ol>
                  </div>
                </div>
              </div>
            </div>
            <div class="panel">
              <h4>
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Interior</a>
              </h4>
              <div id="collapse2" class="panel-collapse collapse">
                <div class="panel-body">
                  <div id="collapse2" class="collapse in" aria-labelledby="heading2">
                    <ol>
                      <button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/1.html')">I01-Interior-1</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/2.html')">I01-Interior-2</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/3.html')">I01-Interior-3</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/4.html')">I01-Interior-4</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/5.html')">I01-Interior-5</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/6.html')">I01-Interior-6</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/INT/I01-Interior/7.html')">I01-Interior-7</button><br>
                    </ol>
                  </div>
                  <!--- SFS --->
                  <div>
                    <a class="collapsed" data-toggle="collapse" href="#collapseOneInt">
                      <h5>SFS</h5>
                    </a>
                  </div>
                  <div id="collapseOneInt" class="collapse">
                    <ol>
                      <button type="button" onclick="setURL('imgs/projects/INT/I02-SFS/1.html')">I02-SFS-1</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/INT/I02-SFS/2.html')">I02-SFS-2</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/INT/I02-SFS/3.html')">I02-SFS-3</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/INT/I02-SFS/4.html')">I02-SFS-4</button><br>
                    </ol>
                  </div>
                </div>
              </div>
            </div>
            <div class="panel">
              <h4>
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Fabrication</a>
              </h4>
              <div id="collapse3" class="panel-collapse collapse">
                <div class="panel-body">
                  <div id="collapse3">
                    <ol>
                      <button type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/1.html')">F01-Fabrication-1</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/2.html')">F01-Fabrication-2</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/3.html')">F01-Fabrication-3</button><br>
                        
                      <a type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/4.html')">F01-Fbuttonbrication-4</button><br>
                        
                      <button type="button" onclick="setURL('imgs/projects/FAB/F01-Fabrication/5.html')">F01-Fabrication-5</button><br>
                    </ol>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--- iFrame --->
        <div class="col-lg-7
          col-md-7
          col-sm-12
          col-xs-12 pull-right
          col-lg-pull-3 img-container
          col-md-pull-3">
          <iframe id="iframe" src="imgs/projects/ARCH/A01-FAF/1.html" allowfullscreen></iframe>
        </div>
        <script>
          function setURL(url) {
            document.getElementById('iframe').src = url;
          }
        </script>
      </div>
    </div>
＆＃13;
＆＃13;
＆＃13;

0 个答案:

没有答案
相关问题
最新问题