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>