On Click and Opacity for simple Biography滑塊

Question

任何人都可以幫助我，我有一個簡單而複雜的問題。我想讓它像下面

的東西，如果你點擊一個圖片的人會對它陰影等。

的網頁即時通訊現在的工作是http://www.3cwaremarketing.com/VisiSite/company-10/team/

感謝您的幫助。你可以看到下面的細節。

HTML

function changeIt(objName) { 
 
    //The image object accessed through its id we mentioned in the DIV block which is going to be visible currently 
 
    var obj = document.getElementById(objName); 
 

 
    //An array that hold the IDs of images that we mentioned in their DIV blocks 
 
    var objId = new Array(); 
 

 
    //Storing the image IDs into the array starts here 
 
    objId[0] = "image1"; 
 
    objId[1] = "image2"; 
 
    objId[2] = "image3"; 
 
    objId[3] = "image4"; 
 
    objId[4] = "image5"; 
 
    //Storing the image IDs into the array ends here 
 

 
    //A counter variable going to use for iteration 
 
    var i; 
 

 
    //A variable that can hold all the other object references other than the object which is going to be visible 
 
    var tempObj; 
 

 
    //The following loop does the display of a single image based on its ID. The image whose ID we passed into this function will be the 
 
    //only image that is displayed rest of the images will be hidden based on their IDs and that part has been handled by the else part 
 
    //of the if statement within this loop. 
 
    for (i = 0; i < objId.length; i++) { 
 
    if (objName == objId[i]) { 
 
     obj.style.display = "block"; 
 
    } else { 
 
     tempObj = document.getElementById(objId[i]); 
 
     tempObj.style.display = "none"; 
 
    } 
 
    } 
 
    return; 
 
}

<a name="isaac"></a> 
 
<a id="one" href="#isaac" onclick="changeIt('image1');"> 
 
    <img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/Isaac1.jpg" border="0" alt="one" /> 
 
</a> 
 

 
<a name="alan"></a> 
 
<a id="two" href="#alan" onclick="changeIt('image2');"> 
 
    <img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/ed.jpg" border="0" alt="two" /> 
 
</a> 
 

 
<a name="ed"></a> 
 
<a id="three" href="#ed" onclick="changeIt('image3');"> 
 
    <img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/alan.jpg" border="0" alt="three" /> 
 
</a> 
 

 
<a name="matt"></a> 
 
<a id="four" href="#matt" onclick="changeIt('image4');"> 
 
    <img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/matt.jpg" border="0" alt="four" /> 
 
</a> 
 

 
<br> 
 
<br> 
 
<div id="image1"> 
 
    <h2>Isaac W. Jacobson</h2> 
 
    VP Business Development 
 
    <br> 
 
    <br>Mr. Jacobson brings a wealth of executive experience and professional relationships, having assembled top-tier executive teams and boards of directors for technology companies, syndicating venture capital, and buying and selling companies throughout 
 
    his career. He has held executive positions with media and technology entities such as theDial.com, Digonex Technologies, MusicRebellion, Digital Kiosk Technologies, Humanizing Technologies and eTAGZ Inc. In addition to building and growing technology 
 
    companies, Mr. Jacobson has had ownership interests across other sectors including precious metals, professional sports teams, and import/export companies working with the countries of Mexico, China, and the United Kingdom. A popular speaker and trusted 
 
    advisor to power brokers, he is often sought out by those in the highest ranks of business, politics, and entertainment to strategize on issues ranging from acquisitions, investments, and public policy to personal growth and bringing to market innovative 
 
    ideas. Mr. Jacobson is dedicated to his community, having established or served on numerous non-profit boards including the Snow College Foundation Board, the UVU Foundation Board, the Hispanic Chamber of Commerce, and the Family Defense PAC. He is 
 
    an avid donor and fundraiser for Republican political candidates and meaningful political initiatives to further Utah�s thriving business environment and family values. Mr. Jacobson is a father of three and he and his wife Tara reside in Mapleton, Utah. 
 
</div> 
 
<div id="image2" style="display:none"> 
 
    <h2>Alan W. Bunker</h2> 
 
    CFO 
 
    <br> 
 
    <br>Mr. Bunker founded Spectrum Field Services with two other partners in 1987. A CPA and MBA, he has enjoyed an extensive career as a top executive in the public accounting, retail department store, real estate development, and health care industries. 
 
    He also has worked as an adjunct professor at the University of Utah. As a Senior Consultant with KPMG Peat Marwick in San Francisco, Mr. Bunker performed numerous consulting engagements in the savings and loan industry. He later became the Executive 
 
    Vice President and Chief Operating Officer of a real estate development firm, with major multi-family residential projects in Texas, Colorado, and Washington. Mr. Bunker has been heavily involved in the field service industry for over 20 years through 
 
    his participation with several industry-related associations. He periodically contributes articles to industry publications, and frequently has chaired committees and panels, including committees responsible for the development of field service standards 
 
    and procedures and technology advances for the industry. A long-time member of the Board of Governors of the National Association of Mortgage Field Services (NAMFS), Mr. Bunker is a past president of that organization. 
 
</div> 
 
<div id="image3" style="display:none"> 
 
    <h2>Ed Bruno</h2>VP of Sales 
 
    <br> 
 
    <br>Mr. Bruno is an 18-year sales veteran with a performance record anchored on results. He has co-founded several start-ups, played a central role in three merger and acquisition events and lead sales teams of over 80 people to deliver on annual budgets 
 
    in excess of $400 million. His expertise crosses numerous business channels including media, technology, corporate communications, intellectual property, licensing, and webcast solutions. Mr. Bruno has held senior leadership roles including COO, CBO, 
 
    and VP of Sales in nine companies, two of them public. Mr. Bruno was voted into the �40 Under 40� by the Seattle Business Examiner. He holds Masters Degrees in English and Rhetorical Studies from Oregon State University</div> 
 
<div id="image4" style="display:none"> 
 
    <h2>A. Matthew Bunker</h2>VP Business Development 
 
    <br> 
 
    <br>Mr. Bunker is a natural-born networker and connector. He started his career as a staff member of the U.S. Senate Committee on the Judiciary in Washington, DC where he primarily focused on U.S. immigration policy but also assisted with judicial nominations 
 
    and crime legislation. Following his tenure with the Senate, Mr. Bunker continued to work with Congress with a government affairs and sports representation group. He also worked closely with the National Basketball Referees Association. Following his 
 
    career in Washington, DC, Mr. Bunker turned his attention to higher education, specifically building alumni associations. He was the Alumni Director for Salt Lake Community College, where he took their alumni activity from 32 active members to over 
 
    30,000 active members in under four years. Then he worked as the Alumni Manager with the MBA program at Brigham Young University. He organized its worldwide network of MBA alumni; focusing a great deal on social and new media, email marketing, and other 
 
    methods of connecting people together. Mr. Bunker speaks fluent Spanish. He holds a Bachelor of Arts in American Studies and Business from BYU and a Master of Public Affairs from the University of Missouri. He and his wife Jacquie are parents of four 
 
    children and they live in Saratoga Springs, Utah.</div> 
 
<br>

Answer 1

你想要做的正好相反。而不是爲其他圖片添加陰影，只是降低其不透明度。 將所有圖像設置爲半透明，懸停時完全不透明。

點擊，添加一個「活動」類，將保持不透明狀態。

$("img").click(function(){ 
 
    $(this) 
 
    .addClass("active") // Adds "active" class to all images 
 
    .siblings() // Selects images other than the one that's been clicked 
 
    .removeClass("active"); // Removes the "active" class on these images 
 

 
    $(".text") 
 
    .hide() // Hides all texts 
 
    .eq($(this).index()) // select only the text corresponding to the clicked image's index 
 
    .show() // Shows only the corresponding text 
 
})

#container{ 
 
    background: #492E1D; 
 
    display: inline-block; 
 
} 
 

 
img{ 
 
    opacity : 0.5; 
 
    -webkit-transition: opacity 0.4s ease-in-out; 
 
    transition: opacity 0.4s ease-in-out; 
 
    cursor: pointer; 
 
} 
 
img:hover, img.active{ 
 
opacity:1; 
 
} 
 

 
.text{ 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <img src="http://www.lorempixel.com/150/200/people"/> 
 
    <img src="http://www.lorempixel.com/150/200/people"/> 
 
    <img src="http://www.lorempixel.com/150/200/people"/> 
 
    <img src="http://www.lorempixel.com/150/200/people"/> 
 
</div> 
 
<p class="text">Text for image 1</p> 
 
<p class="text">Text for image 2</p> 
 
<p class="text">Text for image 3</p> 
 
<p class="text">Text for image 4</p>

Answer 2

我簡化你的Javascript，並添加了必要實現你定義了什麼是需求。檢查下面的代碼片段。這隻使用了vanilla Javascript。對於您的圖片，我添加了一個class="photo"，因爲我認爲頁面上還會有其他圖片，不會受到影響。

//An array that hold the IDs of images that we mentioned in their DIV blocks 
 
var objId = ["image1","image2","image3","image4"]; 
 
var images = document.getElementsByClassName("photo"); 
 
function changeIt(objName) { 
 
    //The following loop does the display of a single image based on its ID. The image whose ID we passed into this function will be the 
 
    //only image that is displayed rest of the images will be hidden based on their IDs and that part has been handled by the else part 
 
    //of the if statement within this loop. 
 
    for (var i = 0; i < objId.length; i++) { 
 
    console.log(i+": "+objId[i]); 
 
    var tempObj = document.getElementById(objId[i]); 
 
    if (objName != objId[i]) { 
 
     tempObj.style.display = "none"; 
 
     images[i].style.filter = "sepia(75%)"; 
 
    } 
 
    else { 
 
     tempObj.style.display = "block"; 
 
     images[i].style.filter = "sepia(0)"; 
 
    } 
 
    } 
 
    return; 
 
}

/* make the effect smoothly animated in browsers that support it */ 
 
img { 
 
    transition-duration: 0.4s; 
 
}

<a name="isaac"></a> 
 
<a id="one" href="#isaac" onclick="changeIt('image1');"> 
 
    <img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/Isaac1.jpg" border="0" alt="one" class="photo" /> 
 
</a> 
 

 
<a name="alan"></a> 
 
<a id="two" href="#alan" onclick="changeIt('image2');"> 
 
    <img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/ed.jpg" border="0" alt="two" class="photo" /> 
 
</a> 
 

 
<a name="ed"></a> 
 
<a id="three" href="#ed" onclick="changeIt('image3');"> 
 
    <img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/alan.jpg" border="0" alt="three" class="photo" /> 
 
</a> 
 

 
<a name="matt"></a> 
 
<a id="four" href="#matt" onclick="changeIt('image4');"> 
 
    <img src="http://www.3cwaremarketing.com/VisiSite/wp-content/uploads/2015/05/matt.jpg" border="0" alt="four" class="photo" /> 
 
</a> 
 

 
<br> 
 
<br> 
 
<div id="image1"> 
 
    <h2>Isaac W. Jacobson</h2> 
 
    VP Business Development 
 
    <br> 
 
    <br>Mr. Jacobson brings a wealth of executive experience and professional relationships, having assembled top-tier executive teams and boards of directors for technology companies, syndicating venture capital, and buying and selling companies throughout 
 
    his career. He has held executive positions with media and technology entities such as theDial.com, Digonex Technologies, MusicRebellion, Digital Kiosk Technologies, Humanizing Technologies and eTAGZ Inc. In addition to building and growing technology 
 
    companies, Mr. Jacobson has had ownership interests across other sectors including precious metals, professional sports teams, and import/export companies working with the countries of Mexico, China, and the United Kingdom. A popular speaker and trusted 
 
    advisor to power brokers, he is often sought out by those in the highest ranks of business, politics, and entertainment to strategize on issues ranging from acquisitions, investments, and public policy to personal growth and bringing to market innovative 
 
    ideas. Mr. Jacobson is dedicated to his community, having established or served on numerous non-profit boards including the Snow College Foundation Board, the UVU Foundation Board, the Hispanic Chamber of Commerce, and the Family Defense PAC. He is 
 
    an avid donor and fundraiser for Republican political candidates and meaningful political initiatives to further Utah�s thriving business environment and family values. Mr. Jacobson is a father of three and he and his wife Tara reside in Mapleton, Utah. 
 
</div> 
 
<div id="image2" style="display:none"> 
 
    <h2>Alan W. Bunker</h2> 
 
    CFO 
 
    <br> 
 
    <br>Mr. Bunker founded Spectrum Field Services with two other partners in 1987. A CPA and MBA, he has enjoyed an extensive career as a top executive in the public accounting, retail department store, real estate development, and health care industries. 
 
    He also has worked as an adjunct professor at the University of Utah. As a Senior Consultant with KPMG Peat Marwick in San Francisco, Mr. Bunker performed numerous consulting engagements in the savings and loan industry. He later became the Executive 
 
    Vice President and Chief Operating Officer of a real estate development firm, with major multi-family residential projects in Texas, Colorado, and Washington. Mr. Bunker has been heavily involved in the field service industry for over 20 years through 
 
    his participation with several industry-related associations. He periodically contributes articles to industry publications, and frequently has chaired committees and panels, including committees responsible for the development of field service standards 
 
    and procedures and technology advances for the industry. A long-time member of the Board of Governors of the National Association of Mortgage Field Services (NAMFS), Mr. Bunker is a past president of that organization. 
 
</div> 
 
<div id="image3" style="display:none"> 
 
    <h2>Ed Bruno</h2>VP of Sales 
 
    <br> 
 
    <br>Mr. Bruno is an 18-year sales veteran with a performance record anchored on results. He has co-founded several start-ups, played a central role in three merger and acquisition events and lead sales teams of over 80 people to deliver on annual budgets 
 
    in excess of $400 million. His expertise crosses numerous business channels including media, technology, corporate communications, intellectual property, licensing, and webcast solutions. Mr. Bruno has held senior leadership roles including COO, CBO, 
 
    and VP of Sales in nine companies, two of them public. Mr. Bruno was voted into the �40 Under 40� by the Seattle Business Examiner. He holds Masters Degrees in English and Rhetorical Studies from Oregon State University</div> 
 
<div id="image4" style="display:none"> 
 
    <h2>A. Matthew Bunker</h2>VP Business Development 
 
    <br> 
 
    <br>Mr. Bunker is a natural-born networker and connector. He started his career as a staff member of the U.S. Senate Committee on the Judiciary in Washington, DC where he primarily focused on U.S. immigration policy but also assisted with judicial nominations 
 
    and crime legislation. Following his tenure with the Senate, Mr. Bunker continued to work with Congress with a government affairs and sports representation group. He also worked closely with the National Basketball Referees Association. Following his 
 
    career in Washington, DC, Mr. Bunker turned his attention to higher education, specifically building alumni associations. He was the Alumni Director for Salt Lake Community College, where he took their alumni activity from 32 active members to over 
 
    30,000 active members in under four years. Then he worked as the Alumni Manager with the MBA program at Brigham Young University. He organized its worldwide network of MBA alumni; focusing a great deal on social and new media, email marketing, and other 
 
    methods of connecting people together. Mr. Bunker speaks fluent Spanish. He holds a Bachelor of Arts in American Studies and Business from BYU and a Master of Public Affairs from the University of Missouri. He and his wife Jacquie are parents of four 
 
    children and they live in Saratoga Springs, Utah.</div> 
 
<br>